Welcome to WebmasterWorld Guest from 50.19.53.104

Forum Moderators: not2easy

Message Too Old, No Replies

Float position with vetical align on bottom line

     

webstyler

8:50 am on Aug 22, 2011 (gmt 0)

10+ Year Member



Hello

I need to made a lot of div with float left, but all text inside must be align vertically on bottom line, as this: [webstyler.it...]

Any suggest ?

Thanks

Paul_o_b

11:25 am on Aug 22, 2011 (gmt 0)

10+ Year Member



Hi,

I don't think you can do it automatically using floats. You would need to micromanage each element and adjust with padding until it lines up.

Using display:table-cell for IE8+ should allow for automatic alignment though.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p{margin:0}
.test span {
display:table-cell;
background:#ccc;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
vertical-align:baseline;
padding:3px 4px;
line-height:1.0;
border:1px solid #fff;
}
.a {
font-size:200%;
font-weight:bold
}
.b {font-size:85%}
.c {font-size:100%}
.d {font-size:65%}
</style>
</head>
<body>
<p class="test"><span class="a">My</span><span class="b">For Testing only</span><span class="d">Example</span><span class="c">Test</span></p>
<p class="test"><span class="d">Example</span><span class="a">My</span><span class="b">Testing</span><span class="c">Example</span></p>
</body>
</html>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month