homepage Welcome to WebmasterWorld Guest from 54.227.25.58
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Float position with vetical align on bottom line
webstyler




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

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




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

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>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved