Page is a not externally linkable
appi2 - 7:46 pm on Jul 2, 2008 (gmt 0)
One of the most common CSS questions, how can I get floated collums to all have equal height to the div with the longest/highest content. Or the many other ways that gets said. Usual answer is use faux collums, but what about an old trick from the past. In its very basic form apply a margin-bottom:-ve and an equal padding-bottom:+ve to the floated div. And overflow:hidden; to an outer wrapper div. There are a couple of problems with this method, you can't use an anchor within the wrapper div and you can't set a bottom border. Anyhoo have a play with this, try diiferent content, take out some of the divs, resize browser ( I like that one),put a width on the #wrapper on and try centering etc etc. Tested in FF2+, IE6+, Opera9.1+, Konqueror3.5+ and Safari3.1 (NOT TESTED ON A MAC) body { li { list-style:none; } #wrapper { overflow:hidden; } #colm1, #colm2, #colm3, #colm4, #colm5 { #colm1 { background:#cc6633; } #colm2 { background:#ff6633; } #colm3 { background:#ff9933; } #colm4 { background:#ffcc99; } #colm5 { background:#cc9933; } label { } #firstname, #lastname, #street { #postcode { img { float:left; } </div>
OK, this is not going to be some tutorial/in depth thang. I'm posting so others can have a play and find any problems.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS float and contnet</title>
<style type="text/css">
* {
margin:0;
padding:0
}
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
}
float:left;
width:14em;
margin-bottom:-500px;
padding-bottom:500px;
text-align:left;
}
display:block;
width:14em;
}
display:block;
width:8em;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="colm1">
<h2>heading </h2>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
<div id="colm2">
<h2>Heading</h2>
<p><img src="1px-yellow.gif" alt=" " width="80px" height="80px">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aliquam sed lorem at sapien mollis
adipiscing. Praesent a felis ac elit vehicula
faucibus. Vivamus sagittis, mi nec pharetra facilisis,
arcu metus porta nisi, in lobortis sapien felis quis
metus. Ut sed massa bibendum nulla semper scelerisque.
Nulla aliquam lacus a elit. Integer placerat sodales orci</p>
<div id="colm3">
<h2>Heading</h2>
<p>Just example content, could be anything.<b>Just dont use anchors</b></p>
<form action="" method="get" name="davetheform">
<fieldset>
<legend>Your Details</legend>
<label for="firstname">First Name:</label>
<input class="input" type="text" title="Enter your first name" maxlength="" size="" name="firstname" id="firstname" value="">
<label for="lastname">Last Name:</label>
<input class="input" type="text" title="Enter your Last name" maxlength="" size="" name="lastname" id="lastname" value="">
<label for="street">Street Name:</label>
<input class="input" type="text" title="Enter your street name" maxlength="" size="" name="street" id="street" value="">
<label for="street">Post Code:</label>
<input class="input" type="text" title="Enter your postcode" maxlength="" size="" name="postcode" id="postcode" value="">
</fieldset>
</div>
<div id="colm4">
<h2>Heading</h2>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
<div id="colm5">
<h2>Heading</h2>
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
</div>
</body>
</html>