Welcome to WebmasterWorld Guest from 54.226.242.132

Forum Moderators: not2easy

Message Too Old, No Replies

Float to bottom

     
1:44 pm on Oct 20, 2012 (gmt 0)

New User

10+ Year Member

joined:Nov 19, 2004
posts: 11
votes: 0


Hi!

I have three floating divs with the last one being smaller than the other two and I'd like it to float to the bottom like this:

[w3.org...]

What I'm trying to do is to align the text of the three divs to the bottom. Is this possible with CSS?


Thanks in advance
2:24 pm on Oct 20, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 12, 2006
posts:2559
votes: 45


im not sure that you can do it the way you want. the only way i know of aligning text to the bottom of those 3 boxes is if they were actually cells in a table. then you can use
vertical-align:bottom
on the <td>
2:28 pm on Oct 20, 2012 (gmt 0)

New User

10+ Year Member

joined:Nov 19, 2004
posts: 11
votes: 0


So, do I have to use display: table-cell instead of the floats?
6:54 am on Oct 21, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:927
votes: 21


There are other options. It depends a bit on how the whole thing is structured.

For example, if you can work with fixed heights you could try:

<!DOCTYPE html>
<html>
<head>
<title>Bottom Alignment</title>
<style type="text/css">

* { margin:0; padding:0; }
html { position:relative; top:0; left:0; width:100%; height:100%; }
body { position:relative; top:0; left:0; width:100%; height:100%; font-family:arial,helvetica,sans-serif; font-size:80%; background-color:lightblue; }
h1 { font-family:georgia,serif; font-style:italic; font-weight:bold; text-align:center; }

#wrapper { width:980px; height:100%; margin:0 auto; background-color:#ffffd7; }
#container { width:610px; height:410px; margin:0 auto; border:solid 1px #000; }

.columnBox { float:left; position:relative; top:0; left:0; width:192px; height:400px; margin-top:4px; margin-left:2px; padding:1px 3px; border:solid 1px red; }
.fixBottom { position:absolute; bottom:0; left:0; }

</style>
</head>
<body>
<div id="wrapper">
<h1>Bottom Alignment</h1>
<br />
<div id="container">
<div class="columnBox">
<p>Column One</p>
</div>
<div class="columnBox">
<p>Column Two</p>
</div>
<div class="columnBox">
<p>Column Three</p>
<p class="fixBottom">You can use position:absolute to move an element to the bottom of its containing element,
even if you &quot;float&quot; it, if you also set the containing element's position property.
</p>
</div>

</div><!-- end #container -->

</div><!-- end #wrapper -->
</body>
</html>