CSS height problem (vertical align)

Please see attached screenshot (image) and source code.

I have one <div> container that contains 2 other <div> containers. I would like these 2 <div> containers to have vartical align = bottom, but cannot make this work. The reason why I want this is because the Button and the text should be displayed "on one line". As you see in the attached screenshot the text and Button is not aligned correct at bottom.

Ofcourse the code need to work correct in IE, Firefox, Safari and Chrome.

 Screenshot
<div style="width:380px; height:25px; background-color: Blue; vertical-align:bottom;">
    <div style="width:60px;  background-color: Gray; float: left">
       <asp:Button ID="btnUploadImage" runat="server" Text="Lagre" />
    </div>
    <div style="width: 320px; float: left; background-color: Lime;">
        <asp:Literal runat="server" ID="litStatus" />
    </div>
</div>

Open in new window

LVL 1
webressursAsked:
Who is Participating?
 
Tom BeckCommented:
You're in control of the height of the blue filled div, yes? Give that div and the div holding the button the same height and there will be no space below the button. Adjust the height of the filler bar above the text so the text is where you want it at the bottom of the blue filled div.

The other simple solution is to eliminate the filler bar above the text and just give a margin-top to the text div. Adjust as necessary to get what you want.

    <div style="width:380px; height:25px; background-color: Blue; vertical-align:bottom;">
    <div style="width:60px;  background-color: Gray; float: left">
       <asp:Button ID="btnUploadImage" runat="server" Text="Lagre" />
    </div>
    <div style="width: 320px; float: left; background-color: Lime;margin-top:11px">
        <asp:Literal runat="server" ID="litStatus" />
    </div>
    </div>
0
 
Kiran SonawaneProject LeadCommented:
You can add the top margin to div like

<div style="width: 320px; float: left; background-color: Lime; margin-top:5px">
0
 
Gurvinder Pal SinghCommented:
or make it

 <div style="width: 320px; float: left; background-color: Lime;display: table-cell; vertical-align: middle; min-height:10px;">

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
webressursAuthor Commented:
sonawanekiran: This will not work 100% correct since Safari has a smaller button than IE. Then the text will be displayed below the button in Safari.

gurvinder372: It did not work... the result is the same.

I think the best solution should have a code that set valign = bottom for the button and the text. Don't know how to make this code in CSS that works identically in all browsers.

Mabye tables is the best solution in this case, this works perfect in all browsers:

<table>
    <tr valign="bottom">
        <td>
            <asp:Button ID="btnUploadImage" runat="server" Text="Lagre" />
        </td>
        <td>
            <asp:Literal runat="server" ID="litStatus" />                
        </td>
    </tr>
</table>
0
 
Tom BeckCommented:
Tables? How quaint.

You can still do it with divs, just add another div to fill in the top bar.

<div style="width:380px; height:25px; background-color: Blue; vertical-align:bottom;">
    <div style="width:60px;  background-color: Gray; float: left">
       <asp:Button ID="btnUploadImage" runat="server" Text="Lagre" />
    </div>
    <div style="width:320px;height:11px;color:gray;float:left">&nbsp;</div>
    <div style="width: 320px; float: left; background-color: Lime;">
        <asp:Literal runat="server" ID="litStatus" />
    </div>
    </div>

Works the same in all browsers.
0
 
webressursAuthor Commented:
The button will still not be vertical aligned (bottom).. ughh!! :) Please see attach image. Button is not vertical aligned correct
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.