Need 3 liquid divs to stretch across page

[boognish]

I'm trying to figure out a similar front page layout as www.dabs.com. Specifically how it displays the hot deals. I have 6 pages I want to link to from the front page in 6 divs - 2 rows, 3 columns that stretch across a container div, like the hot deals divs do at dabs. The dabs source is too complicated to see how its done. Can anyone help me with this please?

[markbrown4]

When you use the term liquid it usually refers to percentage width based layouts where you could have something like
20% | 60% | 20%

In this case it's just consecutive floats of fixed width that stack against each other..
http://www.yellowshoe.com.au/examples/float_stack.html

Hope it helps

[boognish]

Thanks for the link Mark, although thats not what I had in mind. See how on www.dabs.com the divs (hot deals) are liquid. I'd like it to be a liquid (percentage based) 2 row, 3 column layout. Except unlike dabs, if the user changes the size of the browser window alot, I want it to stay as 3 columns. Have you got any examples of this?

As in - as this image demonstrates

[Tyssen]

Float the right column and give it a fixed width in pixels (I'm guessing that's what it's s'posed to be); give the wide left column no width but instead a margin-right equal to the width of the right column.
Then the white boxes in the middle will be inside the wide column, floated left and given a width equal to about a third of 100% once adjusted for margins and padding.

[boognish]

Thanks for that, that was really helpful. I'm getting there - http://edpersonaltraining.com/front.php. I still have the issue of the of it not staying as a 3 column layout, it drops down to 2 colums when the browser window is reduced too much.

CSS

#wrapper { 
text-align: left;
width: 100%;
margin: 0 auto; 
background: #000 repeat-y 10px 0;
}

#contentfloatholder {
background: repeat-y 100% 0;
float: left;
width: 100%;
}

#centerwrap {
float:left;
width: 100%; 
margin: 0 -95% 0 0;
}

#center2 {
margin: 0 175px 0 11px;
}

.box {
margin:20px;
width:29%;
height:250px;
float:left;
background:white;
	}


HTML

<div id="wrapper">
<div id="header">...header content</div>
<div id="contentfloatholder">
  <div id="centerwrap">

    <div id="center2">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  
  </div>
  <div id="right">Menu content...</div>
    </div>
  </div>
</div>

How do I stop it from doing that?

[Tyssen]

It's because you've used pixel margins. At some point, 20px is going to be greater than the space left over for it after you've deducted the % width. That's why you shouldn't mix units on width/padding/margins.

[boognish]

Perfect - Thank you very much!

[boognish]

I came across IE6 display problems while browser testing. Can't figure out how to sort this, it looks fine in other browsers. Can anyone help?

The page - http://www.edpersonaltraining.com
The page in IE6 - http://www.edpersonaltraining.com/picts/ie6problem.jpg

HTML
<div id="wrapper">
  <div id="header">...header content</div>
  <div id="contentfloatholder">
    <div id="centerwrap">
      <div id="center">
        <div class="innerleftcontent"> <a href="http://www.edpersonaltraining.com/edpt.php"><img src="picts/welcomebutton.jpg" class="frontbuttons" /></a> <a href="http://www.edpersonaltraining.com/blog/blog.php"><img src="picts/blogbutton.jpg" class="frontbuttons" /></a> <a href="http://www.edpersonaltraining.com/edge.php"><img src="picts/getfitbutton.jpg" class="frontbuttons" /></a><br />
          <img src="picts/solutions1.jpg" class="frontbuttons" /> <img src="picts/solutions2.jpg" class="frontbuttons" /> <img src="picts/solutions3.jpg" class="frontbuttons" /> <br />
          <a href="http://www.edpersonaltraining.com/you.php"><img src="picts/youbutton.jpg" class="frontbuttons" /></a> <a href="http://www.edpersonaltraining.com/home.php"><img src="picts/homebutton.jpg" class="frontbuttons" /></a> <a href="http://www.edpersonaltraining.com/team.php"><img src="picts/teambutton.jpg" class="frontbuttons" /></a> </div>
      </div>
    </div>
    <div id="right">Menu content...</div>
  </div>
</div>
</div>

CSS

#wrapper { 
text-align: left;
width: 100%;
margin: 0 auto; 
background: #000 repeat-y 10px 0;
}

#contentfloatholder {
background: repeat-y 100% 0;
float: left;
width: 100%;
}

#centerwrap {
float:left;
width: 100%; 
margin: 0 -95% 0 0;
}

#center {
margin: 0 175px 0 11px;
background-color:#ffffff;
border-color:#99cc33;
border-width:2px;
border-style:solid;
min-height:552px;
}

.innerleftcontent
{
margin-top:0px;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
text-align:justify;
	}

.frontbuttons {
margin-left:2%;
margin-right:2%;
margin-top:0%;
margin-bottom:0%;
width:29%;
height:29%
float:left;
}

[Tyssen]

Your width and margins on the images add up to 33% which you would think would be right, but IE6 often gets it a bit wrong and you have to reduce something to make it work. You're also missing the ; before the float: left so it's not actually being applied. You also don't need height on the images either.

[boognish]

Thanks Tyssen. It was the typo ; I missed out. Also reducing the percentage from 29% to 28% corrected the display issue. Though removing the height with the missed ; typo has had strange effects on the display in all browsers. It appears the the "height:29%" with the missing ; allowed the "centre" div to change height with the buttons height change, now its removed the centre div just stays at its min-height and the buttons move over the top of it. I've been trying to recify this for hours now. Can't figure out now to get the centre div to move with the buttons. Any ideas how to sort this?

[Paul O'B]

HI,

You need to clear the floats taht are contained within #center.

See the faq on floats for a number of clearing techniques and an explanation