By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,529 Members | 864 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,529 IT Pros & Developers. It's quick & easy.

two-column page layout

P: n/a
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:
<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>

Oct 3 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Michael Vilain wrote:
Try ... changing the float on the right
column to "right" instead, and giving the right column a width.
...or don't float it at all, but give it a left margin a bit wider than
the width of the left column (e.g. 220px). Though I would opt for
widths and this margin in em units instead.

--
-bts
-Motorcycles defy gravity; cars just suck
Oct 3 '06 #2

P: n/a
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>
Oct 3 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.