WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Float left more div with bottom vertical align

Reply
  Thread Tools Display Modes
Old 22nd August 11, 09:48 AM   #1
webstyler
WLC Member
 
Join Date: Jan 2008
Posts: 4
Default Float left more div with bottom vertical align

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: http://www.webstyler.it/public/floatvertical.jpg

Any suggest ?

Thanks
webstyler is offline   Reply With Quote
Old 22nd August 11, 10:31 AM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Float left more div with bottom vertical align

vertical-align can only be used on inline elements and divs are block elements.
chrishirst is offline   Reply With Quote
Old 22nd August 11, 10:33 AM   #3
webstyler
WLC Member
 
Join Date: Jan 2008
Posts: 4
Default Re: Float left more div with bottom vertical align

Quote:
Originally Posted by chrishirst View Post
vertical-align can only be used on inline elements and divs are block elements.
Hello Chris

Other ways to display this layout ?

Thanks
webstyler is offline   Reply With Quote
Old 22nd August 11, 10:51 AM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Float left more div with bottom vertical align

The normal behaviour for text is to "sit" on the content bottom edge, if you want to make it appear "lower" set the bottom padding to 0.
This will put it on the inside edge of the border area, and if the bottom border is set to 0, it should "sit" on the inner edge of the margin.
chrishirst is offline   Reply With Quote
Old 22nd August 11, 11:13 AM   #5
webstyler
WLC Member
 
Join Date: Jan 2008
Posts: 4
Default Re: Float left more div with bottom vertical align

Quote:
Originally Posted by chrishirst View Post
The normal behaviour for text is to "sit" on the content bottom edge, if you want to make it appear "lower" set the bottom padding to 0.
This will put it on the inside edge of the border area, and if the bottom border is set to 0, it should "sit" on the inner edge of the margin.
uhm.. not understand wath you mena

This is a code

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.roundedbox{float:left;height:34px;margin:2px;background-color:#E6E6E6;padding:2px;}
a{color: #666;text-decoration: none;padding:0;margin:0;}
a:hover{color: Blue;text-decoration: none;}
a.tag12{font-size:12px;}
a.tag18{font-size:18px;}
a.tag24{font-size:24px;}
a.tag30{font-size:38px;}
</style>
</head>
<body>

 <div id="tagcloud">
 <div class="roundedbox"><a href="#" class="tag30">AB</a></div>
 <div class="roundedbox"><a href="#" class="tag12">Mytesting</a></div>
 <div class="roundedbox"><a href="#" class="tag18">Examp</a></div>
 <div class="roundedbox"><a href="#" class="tag12">Pier</a></div>
 <div class="roundedbox"><a href="#" class="tag24">Reaa</a></div>
 <div class="roundedbox"><a href="#" class="tag12">Mystica</a></div>
 <div class="roundedbox"><a href="#" class="tag30">Web</a></div>
 <div class="roundedbox"><a href="#" class="tag12">Neiruaco</a></div>
 <div class="roundedbox"><a href="#" class="tag12">Someon</a></div>
 <div class="roundedbox"><a href="#" class="tag18">dialombar</a></div>   
 </div>
</body>

</html>
webstyler is offline   Reply With Quote
Old 22nd August 11, 11:31 AM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Float left more div with bottom vertical align

OK here is the W3c box model

as you can see, setting padding-bottom: 0; & border-bottom:0; will have the effect of moving the bottom margin edge nearer to the content bottom edge thus giving the appearance of the text being lower.
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:35 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.