I have a site with a two column layout. everything is fine in firefox and opera and almost IE.

the two columns are inside another div so that i can have a border around them both. however, if the content in the right side is longer than the left side it runs below the border.

it does not do this vise versa and it does not run past the footer. it still pushes the footer down to the right spot, however it runs over/past the bottom border.

any help would be great.

html

<div class="container clearfix">

<div class="floatedbox">
<p>floated box</p>
</div>
<h3>Container 1</h3>
<p>(<em>without</em> easy clearing)</p>
</div>

css

.container {
padding:1em;
background-color:#eee;
border:3px solid #ddd;
}
.floatedbox {
float:left;
width:125px;
height:125px;
margin-right:1em;
padding:0 10px;
background-color:#fff;
border:3px solid #bbb;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
/* End hide from IE-mac */



that should work , its from pro css techniques

good book ,buy it

thanks for the help. works fine now.

/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
/* End hide from IE-mac */

First of all, I wouldn't even bother with this, IE Mac is DEAD. Don't waste any sweat on it.

Second, the *html hack will throw IE 7 into fits, so you definitely do NOT want it in your main CSS file. If you MUST use it, use Conditional comments and put that hack into a separate css file that you call from the conditional comment.

The problem you describe, just so you understand, is that your must CLEAR your floats. You can read more on the whys and wherefores here:
http://css-discuss.incutio.com/?page=ClearingSpace