Click to See Complete Forum and Search --> : Arranging DIVs


meinsla
07-07-2008, 11:18 AM
I am trying to center three DIVs on a page but I need each div to be able to automatically resize itself vertically to accommodate the amount of content it holds (which will change). Every time I try to float them, the parent container (the one centering them) will stop holding them.

(Refer to attached file for clarification)

Any help would be appreciated.

chadsten
07-07-2008, 11:24 AM
I am trying to center three DIVs on a page but I need each div to be able to automatically resize itself vertically to accommodate the amount of content it holds (which will change). Every time I try to float them, the parent container (the one centering them) will stop holding them.

(Refer to attached file for clarification)

Any help would be appreciated.

I am sure I can help, but I am gonna need source code...

chadsten
07-07-2008, 11:29 AM
HTML:
<div id="pageWrapper">
<div id="leftColumn">
<div id="whateverContainer"></div>
</div>
<div id="middleColumn">
<div id="whateverOtherContainerOne"></div>
<div id="whateverOtherContainerTwo"></div>
</div>
<div id="rightColumn">
<div id="YouGetTheIdea"></div>
</div>
<div id="anythingBelow"></div>
</div>


and here is the CSS

body {
background-color:#fffff7;
text-align:center;
}
#pageWrapper {
width:960px;
margin:0pt auto;
position:relative;
text-align:left;
background-color:#fffff7;
}

#leftColumn, #middleColumn {
float:left;
width:315px;
}

#rightColumn {
float:right;
width:315px;
}

#anythingBelow {
clear:both;

}

Ok, that was some like 2 minute hand coding....but you should get the idea...

Declan1991
07-07-2008, 11:45 AM
EDIT: Said what chadsten did.

meinsla
07-07-2008, 11:47 AM
Fantastic. Thanks for your help, chadsten.