How to float a div to bottom of the page/table ?

Forum Moderators: not2easy

Message Too Old, No Replies

How to float a div to bottom of the page/table ?

jawaidgadiwala

11:44 pm on Jun 4, 2010 (gmt 0)

I am having a site layout in table. there are two columns LEFT and CONTENT, LEFT contains two divs LEFT-TOP and LEFT-BOTTOM. i want to know that how can i float LEFT-BOTTOM div to the bottom in the column LEFT. Here is the code...


<html>
<head>
<style type="text/css">
#left{
vertical-align:top;
width:200px;
background-color:#0066FF;
}
#content{
width:500px;
background-color:#CC0033;
}
#left-top{
width:100%;
height:50px;
background-color:#FFFF00;
}
#left-bottom{
width:100%;
height:50px;
background-color:#33FF00;
}
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0">
<tr>
 <td id="left">
 <div id="left-top">
  TOP
  </div>
  <div id="left-bottom">
  BOTTOM
  </div>
 </td>
 <td id="content">
 a<br/>aasd<br/>aasd<br/>aasd<br/>aadsas<br/>aasdasd<br/>asdsada<br/>dasdasa<br/>a<br/>a<br/>aasd<br/>a<br/>a<br/>
 </td>
</tr>
</table>
</body>
</html>

milosevic

2:55 pm on Jun 8, 2010 (gmt 0)

You don't float stuff to the bottom - float is either left or right. It sounds boring but you should read up on what float and clear actually are, it's simple when you have it explained in the right way and it transforms the way you think about CSS.

To get stuff to go to the bottom regardless of the amount of content above it, you need to use absolute positioning. set position:absolute and bottom:0 on the div and see if that works. Absolute positioning is awkward and confusing to use and best avoided when possible (you have been warned!).