holder with 3 columns, holder height=column height 1

[ThomasJSmart]

i could make this with a table in about half a minute, but i decided to take the difficult (but correct) route and do it with divs, which ofcourse are not cooperating ^_^

i have a holder
inside this holder is a header
under the header are 3 columns

i would like the holder height to be the same as the hightst column height, wich could be any three (dynamic)

my current setup is something like this:

//html-----------------------
<div id="holder">

  <div id="header"></div>

  <div id="col1"></div>
  <div id="col2"></div>
  <div id="col3"></div>

</div>



//css-----------------------
#holder{
  width:900px;
  position relative:
  margin-left:auto;
  margin-right:auto
}

#header{
  width:900px;
  height:150px;
  position: absolute;
  top:20px; left:0px;
}

#col1{
  width:160px;
  position:absolute; 
  left:20px; top:0px;
}
#col2{
  width:560px;
  position:absolute; 
  left:200px; top:0px;
}
#col3{
  width:160px;
  position:absolute; 
  left:780px; top:0px;
}

now this gives me the structure i want except that the holder is only a few pixels high because all the content is positioned absolute.

i tried to set the height of the holder to 100%, this worked great untill the content became bigger than the screen and it seemed the holder stopped where the screen ended leaving a big gap if i scrolled down.

i tried to set the positioning of the columns to relative. but it only worked if i set only 1 of them to relative, but as i dont know which one is going to be longest this didnt work either...

so what now?


I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[Vragabond]

I suggest you dump the absolute positioning in favour of floats. Floats are the way to design multiple columns. There are times to use absolute positioning as well, just not when designing a multiple column structure.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ThomasJSmart]

omg not floats.. anything but floats.... i have bad experience with floats links suddenly not working, divs not scrolling with the rest but frozen in time.... is there no other way?

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[Vragabond]

You can use absolute positioning and have no container. Or use elaborate javascript to calculate the height of the elements and extend the container afterwards. Or you could do the same as millions of other websites that use floats.

There's nothing odd or mystical about floats. The only time they don't work is when everything else around the floats is too complicated because the developer did not know how to code things correctly.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BillyRayPreachersSon]

Vragabond is right - absolute positining is not the way to go for fluid columns. Floating really is the best in this scenario - you just have to get your head around it

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[datamasher]

Hi,
try this for your css as a starting point

#holder {
  width:900px;
  margin-left:auto;
  margin-right:auto;
  border:1px solid red;
}

#header{
  width:880px;
  height:150px;
  padding:10px;
  border:1px solid black;
}

#col1{
  width:140px;
  float:left;
  padding:10px;
}

#col2{
  width:560px;
  float:left;
  padding:10px;
}

#col3{
  width:140px;
  float:left;
  padding:10px;
}

hope this helps !!

Datamasher

 

[ThomasJSmart]

thank you all, i have managed to get it working with floats without it all falling apart even (bonus) ^_^

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!