CSS Positioning and vertical align

[MrBelfry]

Hey there

I am using CSS positioning to layout a page. I want a section at the top that contains a banner (200px*50px) and then some text navigation and a text box (for doing searches). In an ideal world I would like the navigation to be aligned along the bottom of the section but currently can only align it along the top. Here is my CSS

.bannercontent {
width: 50%;
vertical-align: bottom;
float: left;
}
#banner {
width: 100%;
height: 50px;
}

.ontop {
float:left;
height: 50px;
width: 200px;
}


the old HTML looks something like this:

<div id=&quot;banner&quot;>
<img class=&quot;ontop&quot; src=&quot;logo2.gif&quot;>
<span class=&quot;bannercontent&quot;>Search:</span>
</div>


I've tried a couple of the vertical-align settings but am not having much joy. I dont won't to set the top of the bannercontent section absolutely because if somebody changes the font size on their browser it looks stupid (text overlaps bad). Much to anyone who can help


MrBelfry

 

[maboline]

Sorry, my English is not so good, but wanted to give you an answer.

VERTICAL-ALIGN doesn't work with a div box. With a table it will work. As I understand the reason is that a div is no parent inline-level element.

You can read more here:

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

mab