CODEWITHSUNDEEP
htmlcss
JsCoder
JsCoder

Reputation: 1733

Divs in Table Cell force one line

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?

Upvotes: 1

Views: 1804

Answers (5)

Jack
Jack

Reputation: 96

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>

Upvotes: 3

tctham
tctham

Reputation: 213

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.

Upvotes: 1

000
000

Reputation: 3950

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

Upvotes: 1

Paul Fleming
Paul Fleming

Reputation: 24526

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

Alternatively you can use float: left.

Upvotes: 1

Yograj Gupta
Yograj Gupta

Reputation: 9869

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

Upvotes: 1

Related Questions