FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

3 columns using div and css

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


hyhy
Hi i recently started learning and using xhtml and css instead tables. But there's one thing i can't figure out, how is the easiest way to make 3 columns where the right and left one has for example 200px static and the middle one has the rest of width. I saw one solution but it used many classes, and guy made left and right margin like 200 px of the middle column, and then put left and right column on those margins. Is there easiest way like:

Code:
<table style="width:100%">
<tr>
<td style="width:200px">
left
</td><td> 
mid // will take the rest of width
</td><td style="width:200px">
right
</td>
</tr>
</table>
rohan2kool
Scenario: There is a main 'div' with the id 'holder', which has 3 div's with id's 'col1', 'col2' and 'col3'. All these three take up 33% of the parent width and the parent width of 'holder' can be set to anything you like. Here's how you go about it:

Code:

<html>
 <head>
  <style type="text/css">
  <!--
   #holder {
      width: 600px;
      clear: both;
   }

   #col1 {
      width: 33%;
      float: left;
   }

   #col2 {
      width: 34%;
      float: left;
   }

   #col3 {
      width: 33%;
      float: left;
   }
  -->
  </style>
 </head>

 <body>
  <div id="holder">
   <div id="col1">
    <p>This is column 1 data</p>
   </div>
   <div id="col2">
    <p>This is column 2 data</p>
   </div>
   <div id="col3">
    <p>This is column 3 data</p>
   </div>
  </div>
 </body>
</html>


I tried it.. it works.. see if this is what you wanted.. hope it helps Wink
hyhy
No it makes only 600 pixel table. I want 100% width table, and yes i can put 3 columns in it with 33% 33% and 34% but i want static right and left column like 200px only, not dependable on screen resolution and only middle column dynamically resizing and taking 100% of your width minus those 400 pixels.

Anyway thanks for try.
hyhy
Okay i found an example. It is using margins but in simpler and easier way than i saw so i might use it.

Code:
<div style="float:left;width:180px;height:100%;margin-right:-3px;">   l</div>

<div style="float:right;width:180px;height:100%;margin-left:-3px;">r</div>

<div style="margin:0 179px;height:100%;">m</div>


If anyone knows how to make it without margins (padding or border) or know is it possible i'll be glad to know.
rohan2kool
well.. if that's what you needed, you can set the width of holder as 100% and width of col1, col2 and col3 as 200px, 200px, 200px (or whatever you want it to be). Your example of margin's seems to have a very non-standard and unscientific approach towards CSS (don't mean to be rude.. but that's a 'hack' sorta thing and you don't need a hack when u can perfectly achieve it via normal and standard specific methods).
hyhy
rohan2kool wrote:
well.. if that's what you needed, you can set the width of holder as 100% and width of col1, col2 and col3 as 200px, 200px, 200px (or whatever you want it to be). Your example of margin's seems to have a very non-standard and unscientific approach towards CSS (don't mean to be rude.. but that's a 'hack' sorta thing and you don't need a hack when u can perfectly achieve it via normal and standard specific methods).


If i set 3 columns 200px each i get 600px, and i want the middle column fluid taking the rest of width not only 200px. Or i didnt understand something?
rohan2kool
hyhy wrote:
rohan2kool wrote:
well.. if that's what you needed, you can set the width of holder as 100% and width of col1, col2 and col3 as 200px, 200px, 200px (or whatever you want it to be). Your example of margin's seems to have a very non-standard and unscientific approach towards CSS (don't mean to be rude.. but that's a 'hack' sorta thing and you don't need a hack when u can perfectly achieve it via normal and standard specific methods).


If i set 3 columns 200px each i get 600px, and i want the middle column fluid taking the rest of width not only 200px. Or i didnt understand something?


that's what i actually wanted and i had postd in the other thread... Very Happy
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.