1

I've the following html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    </head>
<body>

    <table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
        <tr>
            <td>
                <div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
                <div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;">R</div>
            </td>
        </tr>
    </table>
</body>
</html>

I want the green boxes with R & L to be on the same line w/o using JS, how do I do that?

5 Answers 5

3

Just add "float:left;" to the style attribute on the box L and add "float:right;" to the style attribute on the box R

then add valign="top" at the td tag. The parent tag of the boxes if you want it align to the top.

see code below

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

</head>
<body>

    <table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
        <tr>
            <td valign="top">
                <div style="float:left;margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
                <div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;float:right;">R</div>
            </td>
        </tr>
    </table>
</body>
</html>
1
  • One thing I found when using float vertical alignment of the container somehow gets ignored always v-aligning to the top. Is there a way fix it?
    – JsCoder
    Commented Jul 19, 2012 at 11:26
1

Add css style "float:left;". It will solve this.

1

You can use css display: inline-block. Note that this doesn't work in older browser versions.

Alternatively you can use float: left.

1
<div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px; float:left;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px; float:left;">R</div>
1

You can either add css float: left to DIV L only;

Or you can add css float: left to DIV L and float: right to DIV R.

Ultimately, it depends on what you are trying to achieve here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.