...

View Full Version : Can't stack divs..



absoleet
08-08-2012, 11:27 PM
The desire output is as follows:

[[left][right]]
[ Footer ]

Left and right will be different heights, so I have put the, in a container together.

My HTML & CSS is here:
http://jsfiddle.net/PE86y/2/

Edit:
If I manually specify the height to say, 20, I get the desired look. However the height will always be variable, so a fixed height is not ideal.

Arbitrator
08-09-2012, 07:52 AM
The desire output is as follows:

[[left][right]]
[ Footer ]Given your HTML code:


<!-- Holder -->
<div id="holder">
<div id="left_column">Left Column</div>
<div id="right_column">Right Column</div>
</div>
<!-- Holder -->

<!-- Footer -->
<div id="footer_bg">Footer should be stacked</div>
<!-- Footer -->

The following (simplified) CSS should do the trick:


/* Default Layout */
* { margin: 0; }

/* Basic Layout */
#holder { width: 200px; margin: 0 auto; }
#left_column { float: left; width: 100px; }
#right_column { width: 100px; }
#footer_bg { clear: left; min-height: 200px; }

/* Color Scheme */
#left_column { background-color: #390; color: black; }
#right_column { background-color: #060; color: black; }
#footer_bg { background-color: #1b1b1b; color: white; }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum