On 2006-10-03,
as*******@hotmail.com <as*******@hotmail.comwrote:
Hi,
I am trying to set up a simple two column page layout but somehow the
second column shows up at the bottom of the page:
You need to set a width on .rightColumn as well.
I'm assuming you've got more content in it really than "blah blah blah"
(exactly as posted, I get two columns in FF). The computed width for an
auto width float is min("preferred content width", available width).
The "preferred content width" is the width of all the text on a single
line with no line breaks.
I'm simplifying a bit, because the computed width will also not go
shorter than the length of the longest word, but that's not the problem
here.
Anyway, once you've got some text in there, the preferred width quickly
gets above the roughly 500px free to the right of .leftColumn, at which
point the float will no longer at the side and gets moved down.
><html>
<head>
<title>Untitled Page</title>
<style type="text/css">
.content{
margin:auto;
width:700px;
background-color:white;
border: solid 1px black;
}
.leftColumn{
float:left;
padding:5px;
width:200px;
border-right:solid 1px black;
height:700px;
}
.rightColumn{
float:left;
padding:5px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="leftColumn">
blah blah blah
</div>
<div class="rightColumn">
blah blah blah
</div>
<br class="clear" />
</div>
</body>
</html>
