January 29th, 2004, 12:15 PM
|
 |
Contributing User
|
|
Join Date: Apr 2007
Location: Cape Cod
Posts: 1,347
Time spent in forums: 3 h 52 m 2 sec
Reputation Power: 3
|
|
|
RE: A question on CSS Floating Boxes
I think the easiest way to do this is to start with the two box/two column example and simply duplicate the two boxes to be four (and change the ids accordingly). Also, duplicate the CSS and rename the copy of #content to #content3 and the copy of #content2 to #content4.
So, the CSS looks like:
Code:
#content1 { ... }
#content2 { ... }
#content3 { ... }
#content4 { ... }
and the HTML looks like:
Code:
<div id="content1"> ... </div>
<div id="content2"> ... </div>
<div id="content3"> ... </div>
<div id="content4"> ... </div>
The only problem now is if you want the rows aligned as well as the columns. To do that, use a spacer div between content2 and content3:
Add this to the CSS:
Code:
div.spacer { clear: both; font-size: 1px; }
And make the HTML look like:
Code:
<div id="content1"> ... </div>
<div id="content2"> ... </div>
<div class="spacer"> </div>
<div id="content3"> ... </div>
<div id="content4"> ... </div>
The spacer's "clear: both;" style is the important part: it pushes everything down until it's past everything on its right and left, so then content3 and content4 can start at the same height.
|
Codewalkers Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
