Search code examples
htmlasp.netdhtml

Div containing checkbox falling down the containing div in firefox and chrome

I have a structure like

<div>
    <label>
        Name</label>
        <div style="text-align: right;">
    <input type="checkbox" value="1" name="chbName" class="checkbox" id="chbName"
        runat="server" checked="checked" /></div>
</div>

and smilar elements like these are in asp TableCell, for some reason the name and checkbox are not lined up horizontally. Its like the div containing the checkbox is one step down in UI. And this is happening in chrome and mozilla only.

Solution

  • div is a block level element - it will appear below the label unless you give it one of the following styles:

    display:inline;
display:inline-block;
float:left; (or right)

    eg 

    <div style="text-align: right; display:inline-block;">