Arranging DIVs

@meinslaJul 07.2008

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.

~~[upl-file uuid=f9a91b8d-8488-4b70-a258-b4d1006d6e2b size=50kB]~~example.bmp[/upl-file]

to post a comment

CSS

@chadstenJul 07.2008 — #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.[/QUOTE]

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

@chadstenJul 07.2008 — #HTML:

[code=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>
 [/code]

and here is the CSS

[CODE]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;
 
 }[/CODE]

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

@Declan1991Jul 07.2008 — #EDIT: Said what chadsten did.

@meinslaauthorJul 07.2008 — #Fantastic. Thanks for your help, chadsten.

Arranging DIVs

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Arranging DIVs

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴