Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 407
  • Last Modified:

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

0
webressurs
Asked:
webressurs
1 Solution
 
sonawanekiranCommented:
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
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now