Comments on: Two Columns of Variable But Equal Height Using Simple CSS and a Couple of DIVs http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/ Rob Larsen writes on web design and development, entertainment, sports and culture. Wed, 20 Aug 2008 10:22:35 +0000 http://wordpress.org/?v=2.6 By: rob http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15948 rob Fri, 21 Mar 2008 19:58:59 +0000 http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15948 is there a demo somewhere? is there a demo somewhere?

]]> By: James http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15947 James Fri, 21 Mar 2008 19:50:59 +0000 http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15947 I have found a good tutorial to set equal height without using an image. Here is the link: <a href="http://www.girendra.com/?p=17" rel="nofollow">Create equal height columns using CSS</a> I have found a good tutorial to set equal height without using an image. Here is the link: Create equal height columns using CSS

]]> By: rob http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15721 rob Wed, 13 Feb 2008 16:08:09 +0000 http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15721 Yeah, you need to escape markup. I should put some helper text in near the comment field. I'll keep my eyes peeled for the email. I always knew (at some level) that there was a cleaner technique to clear floats. Thing is, as much as I hate adding arbitrary markup, clearing them with a div like that is just so easy I never sought out the cleaner version. Thanks! Yeah, you need to escape markup. I should put some helper text in near the comment field.

I’ll keep my eyes peeled for the email.

I always knew (at some level) that there was a cleaner technique to clear floats. Thing is, as much as I hate adding arbitrary markup, clearing them with a div like that is just so easy I never sought out the cleaner version.

Thanks!

]]> By: ArkRep http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15720 ArkRep Wed, 13 Feb 2008 16:01:42 +0000 http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15720 Bah ... the your comment system is removing my tags... I'll ping you an email .. Ark Bah … the your comment system is removing my tags… I’ll ping you an email ..

Ark

]]> By: ArkRep http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15719 ArkRep Wed, 13 Feb 2008 16:00:37 +0000 http://www.drunkenfist.com/304/2008/02/08/two-columns-of-variable-but-equal-height-using-simple-css-and-a-couple-of-divs/#comment-15719 Hi Rob, It's arkrep here ... I've moddded you code to include the new clearfix which you add in the the container of the floated content.. That way you don't need to add in extra markup ... ie. CSS /*the two-column container*/ #container #two-columns { /*set that background image*/ /*repeat it and center it*/ background: url(images/bg.jpg) repeat-y center; height: auto; width: 500px; margin:auto auto 20px auto; } #container #two-columns #column-2 { /*float it*/ float:right; height: auto; width: 215px; padding:5px; } #container #two-columns #column-1 { height: auto; width: 215px; padding:5px; } .clr { clear:both; } .clr:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clr {display: inline-block;} /* Hides from IE-mac \*/ * html .clr {height: 1%;} .clr {display: block;} /* End hide from IE-mac */ HTML A column in structural engineering is a vertical structural element that transmits, through compression, the weight of the structure above to other structural elements below. A column in structural engineering is a vertical structural element that transmits, through compression, the weight of the structure above to other structural elements below. Hi Rob, It’s arkrep here …

I’ve moddded you code to include the new clearfix which you add in the the container of the floated content.. That way you don’t need to add in extra markup …
ie.

CSS

/*the two-column container*/
#container #two-columns {
/*set that background image*/
/*repeat it and center it*/
background: url(images/bg.jpg) repeat-y center;
height: auto;
width: 500px;
margin:auto auto 20px auto;
}
#container #two-columns #column-2 {
/*float it*/
float:right;
height: auto;
width: 215px;
padding:5px;
}
#container #two-columns #column-1 {
height: auto;
width: 215px;
padding:5px;
}

.clr {
clear:both;
}

.clr:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clr {display: inline-block;}

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

HTML

A column in structural engineering is a vertical structural element that transmits, through compression, the weight of the structure above to other structural elements below.
A column in structural engineering is a vertical structural element that transmits, through compression, the weight of the structure above to other structural elements below.

]]>