CSS Expanding DIVs

Another post about expanding DIVs in CSS

[crazy_yak]

Hello,

I've looked at most of the previous posts asking this question but I can't get any of them to work.

My problem is this: I've set up a container on my webpage using CSS put it doesn't expand to fit in the two main DIVs inside it

I've tried the clearer method and they're absolutely positioned but it just won't expand to fit them in (it does expand to fit in the footer text though).

Some of the code is below:

#content {
/*height:1200px;*/
position:relative;
width:750px;
background-color: #FFFFFF;
padding:10px;
border: 1px solid #000000;
margin: auto;
}
...
#side-column {
position:absolute;
left: 0px;
width:200px;
}
#main-column {
position:absolute;
padding-top:10px;
left: 210px;
width:540px;
}
...

Thanks!

Mark

[edited by: SuzyUK at 6:42 pm (utc) on Jan. 25, 2008]
[edit reason] No URI's please [/edit]

[crazy_yak]

I've actually sorted out this issue temporarily by using tables. But a better way would be good.

[SuzyUK]

Hi crazy_yak and Welcome to WebmasterWorld!

can't have you using tables now can we ;)

because your left and right columns are both Absolutely Positioned they are not actually taking up and room in the flow. Then the wrapper doesn't even know it's got anything to wrap around..

Absolute Positioning is like taking post it notes and sticking them on your screen if you like :)

and there is no way you can get the outer wrapper to know where or what size they are..

solution: as far as I can see from the code that's posted, you should not have to position them at all, and could use floats instead, now with floats the same scenario will occur, but for different reasons - but this time it will possible to tell your parent wrapper to contain it's floated children. this time the elements are removed from the flow but there place is held for them by the parent, and you just need a way to tell the parent to watch out for them.. this is know as "clearing floats"

there are a few methods of clearing floats:
1.You float the parent too, but that's not always suitable if you're trying to center a design.
2.You add overflow: auto; to the wrapper (and a width for IE, but you've already got that)
2.You can add what's commonly called a clearing element to the HTML source after the both the floated children - <br style="clear: both;">

I would go with 2 as it's the legitimate way

so

CSS:
#content {
width:750px;
background-color: #abc;
padding:10px;
border: 1px solid #000000;
margin: auto;
overflow: auto;
}

#side-column {
float: left;
width: 200px;
background: #fff;
}

#main-column {
float: right;
padding-top:10px;
width: 540px;
background: #dad;
}

HTML:
<div id="content">
<div id="side-column">Side Column</div>
<div id="main-column">Main Column</div>
</div>

hth..