H
henrybranson
I'm trying to achieve a multi-column layout in CSS where the columns
are all of equal length irrespective of the content in them. I've tried
to implement Dan Cederholm's faux columns solution but it doesn't work.
Here's my code - what am I doing wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
color: #7F7F7F;
font: normal 0.70em/1.6em Verdana, Arial, sans-serif;
margin: 0;
padding: 0;
}
#container {
background: #fff56b url("bg.gif") repeat-y 0 0;
float: left;
width: 780px;
background-color: #FFF;
border: 1px dotted #000;
}
#column1, #column2, #column3, #column4 {
width: 25%;
background-color: #CCFFCC;
float: left;
}
#clear {
clear:both;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="column1">content</div>
<div id="column2">Alternatively, if borders or padding can be avoided
altogether by just using margins instead, then the the Box Model Hack
will not be necessary. And if the column's content is simply sitting
(transparently) on top of the tiled background, then it should be easy
to avoid the hack.
</div>
<div id="column3">content</div>
<div id="column4">Alternatively, if borders or padding can be avoided
altogether by just using margins instead, then the the Box Model Hack
will not be necessary. And if the column's content is simply sitting
(transparently) on top of the tiled background, then it should be easy
to avoid the hack. Alternatively, if borders or padding can be avoided
altogether by just using margins instead, then the the Box Model Hack
will not be necessary. And if the column's content is simply sitting
(transparently) on top of the tiled background, then it should be easy
to avoid the hack.
</div>
<div id="clear"></div>
</div>
</body>
</html>
are all of equal length irrespective of the content in them. I've tried
to implement Dan Cederholm's faux columns solution but it doesn't work.
Here's my code - what am I doing wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
color: #7F7F7F;
font: normal 0.70em/1.6em Verdana, Arial, sans-serif;
margin: 0;
padding: 0;
}
#container {
background: #fff56b url("bg.gif") repeat-y 0 0;
float: left;
width: 780px;
background-color: #FFF;
border: 1px dotted #000;
}
#column1, #column2, #column3, #column4 {
width: 25%;
background-color: #CCFFCC;
float: left;
}
#clear {
clear:both;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="column1">content</div>
<div id="column2">Alternatively, if borders or padding can be avoided
altogether by just using margins instead, then the the Box Model Hack
will not be necessary. And if the column's content is simply sitting
(transparently) on top of the tiled background, then it should be easy
to avoid the hack.
</div>
<div id="column3">content</div>
<div id="column4">Alternatively, if borders or padding can be avoided
altogether by just using margins instead, then the the Box Model Hack
will not be necessary. And if the column's content is simply sitting
(transparently) on top of the tiled background, then it should be easy
to avoid the hack. Alternatively, if borders or padding can be avoided
altogether by just using margins instead, then the the Box Model Hack
will not be necessary. And if the column's content is simply sitting
(transparently) on top of the tiled background, then it should be easy
to avoid the hack.
</div>
<div id="clear"></div>
</div>
</body>
</html>