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

CSS Forum

    
div content alignment
how to align div content to bottom of container box
KatrinR




msg:3517436
 6:57 pm on Nov 30, 2007 (gmt 0)


Hello,

I want to create a vertical navigation bar that is align at the bottom of the container box.
I tried it with vertical-align:bottom in the css, even tried to add valign="bottom" in the xhtml doc (what I really prefer to avoid), yet nothing works. Is it because of working with floats?

here is the code snippet

<div id="mcfooter_wedding">
<div id="weddnav">
<div class="weddnav1"><img src="images/wedding/weddvenuesm.jpg" /><br>venues</div>
<div class="weddnav1"><img src="images/wedding/weddworkshopsm.jpg" /><br>workshop</div>
<div class="weddnav1"><img src="images/wedding/weddmenusm.jpg" /><br>menus</div>
<div class="weddnav1"><img src="images/wedding/weddphotogsm.jpg" /><br>gallery</div>
<div class="weddnav1"><img src="images/wedding/weddindexsm.jpg" /><br>wedding home</div>
<div class="weddnav1"><img src="images/wedding/weddprepsm.jpg" /><br>planning</div>
</div>
</div>

here the css part:

#mcfooter_wedding{
width:700px;
clear:both; [...refers to other part of the layout...]
height:90px;
background-color:ffcccc;
margin:30px 0px 30px 0px;
}
#mcfooter_wedding #weddnav{float:left;
margin:0;padding:0;
height:100%;}
#mcfooter_wedding #weddnav .weddnav1{
float:left;
margin-left:40px;
vertical-align:bottom;
border:1px solid #000000;}

I appreciate your help!

Katrin

 

ratman7




msg:3517493
 8:25 pm on Nov 30, 2007 (gmt 0)

You don't need to float #weddnav if it is wrapped in a div. It should appear oriented by default in the top left of the div it is contained in. Then put top margin or padding on #weddnav to get it positioned where you want. eg., margin-top:30px;
Hope that helps...

KatrinR




msg:3517578
 9:42 pm on Nov 30, 2007 (gmt 0)

hi ratman7,

every link image has a different height, therefore, instead of having them all aligned on top (as it is by default), I thought there would be a possibility to simply *align* them all at the bottom.

Well, yes, if this is not possible, I could make the link images all the same height and define a top margin.

thank you for your reply,

Katrin

ratman7




msg:3517603
 10:12 pm on Nov 30, 2007 (gmt 0)

No problem. You could try negative bottom margin values, or a define a different class for each nav item. Sizing things identically is probably your best bet though, it often seems to make things easier.

Xapti




msg:3517661
 11:28 pm on Nov 30, 2007 (gmt 0)

Vertical align (in the way you described) is for tables only. You could achieve that by using non-semantic markup (being tables) if you wanted.
I think something that would also work would be to use vertical-align, but only on images, no divs (and therefor no text). This is because vertical-align is assigned to inline elements, to which images are by default a part of.

Not only is it not really possible (properly) to control vertical alignment with the CURRENT specification of CSS, but even if it were, it would conflict with your float.

Vertical alignment without using tables can be accomplished either with hacks/workarounds (display:table-cell for browsers which support; hacks for IE) or javascript.

ratman7




msg:3517666
 11:34 pm on Nov 30, 2007 (gmt 0)

Not only is it not really possible (properly) to control vertical alignment with the CURRENT specification of CSS, but even if it were, it would conflict with your float.

True, since CSS offers other ways to position elements, vertical align isn't necessary.

KatrinR




msg:3517703
 12:32 am on Dec 1, 2007 (gmt 0)

thank you,both!

Now, everything is clear to me.
No, I don't want to use tables, hacks are not necessare in that case, therefore, I will use the margin-top solution.

Katrin

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved