Forum Moderators: not2easy
.leftnav {
position: absolute;
left: 0px;
top: 0px;
}
.content {
position: absolute;
left: 150px;
top: 0px;
}
In the html:
<div class="leftnav">A bunch of navigation</div>
<div class="content">A bunch of content</div>
Now, underneath both of these columns, spanning the width of both, I want a footer div. The leftnav and the content will not be the same length down the page. I don't know which of these 2 columns will be longer on any given page. However, underneath the longest column, I want to put my footer div.
I could do this with a table easily enough. But how fun would that be?
Try googling for 'exploring footers css'. the first site gives plenty of examples
hope this helps
Leo
It looks like I've got to use tables.
just a thought why not put a wrapper around the leftnav and content divs and put the footer after this wrapper
something like:
<div id="wrapper">
<div id="leftnav">A bunch of navigation</div>
<div id="content">A bunch of content</div>
</div><!-- end wrapper -->
<div id="footer">your footer</div>
Simply give the wrapper div a fixed height and your footer will always be at the same place, no matter what. Or if you want the footer to be close to the tallest div, personalise the wrapper height by creating a wrapper style for each page (that only works if you don't have too many pages).
Leo
I'll sticky you something I've done today which might help
Leo
I looked up "float" in the Eric Meyer CSS book, which reports that its support among browsers is extremely spotty.
Here's the code I used:
<style type="text/css">
.wrapper {
position: absolute;
background-color: red;
left: 150px;
top: 10px;
width: 400px;
vertical-align: top;
}
.left {
float: left;
background-color: yellow;
width: 100px;
vertical-align: top;
}
.right {
background-color: green;
margin-left: 100px;
width: 300px;
vertical-align: top;
}
.bottom {
background-color: blue;
clear: both;
width: 400px;
vertical-align: top;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left"><p>Left</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="right"><p>Right</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="bottom">Bottom</div>
</div>
</body>
</html>
Trouble with float is, the browser support is very spotty.
I've heard this before but don't see it, myself. The worst float support problem is in IE5/Mac, which admittedly has some issues, but a simple float layout works in the major browsers: Moz, FF, IE5.x and 6, NN (I don't test in Opera or Safari so I'm not sure about those).
Perhaps the "spotty support" refers to the fact that you have to be careful when using floats. Proper floating usually requires the use of other, ancillary properties to make sure that the float behaves in the way you want it to (like margins to demark columns, clears to end the floating, and carefully calculated widths to prevent float wrapping). But if you do all these things correctly, I don't see float as an unreliable layout tool.
The right div doesn't start right at the top, but is pushed about 1em down from the top. Also, the contents of the left div isn't at the top either, but is also pushed down about 1em.
So this isn't a problem with the float property at all. It's a question of what all the elements on the page are doing, how and why, and in particular how those elements will behave in relation to a float. This makes floats tricky to use, but not unreliable.
cEM
[edited by: createErrorMsg at 9:22 pm (utc) on Jan. 6, 2005]
.right {
background-color: green;
float: left;
width: 300px;
vertical-align: top;
}
