CODEWITHSUNDEEP
htmlcss
4thSpace
4thSpace

Reputation: 44352

How to use remaining width?

I'd like to have div2 horizontally aligned right of div1. Div2 should also stretch the remaining width, which is a variable number (browser width). If I set div2 width to something absolute (300px), I get the correct alignment but lose consuming the remaining width.

How should this be done?

<div id="1" style="float:left;width:100px">
    the first box
</div>
<div id="2" style="float:left;width:100%">
    the second box
</div>

Upvotes: 0

Views: 70

Answers (3)

Huangism
Huangism

Reputation: 16448

If you don't want div2 to wrap under div doesn't matter how much content there is then

http://jsfiddle.net/h424c/2/

div {
    display: table-cell;
}

HTML

<div id="a1" style="width:100px">
    the first box
</div>
<div id="a2">
    the second box sfsdf dsf sdfasdf sadf sadf sadf asdf sadf sdaf sadf sdfsadf sdaf asdf sdf sdf sdaf asdf sadf sdaf sdaf sdf sdaf sadf sdf sdf sdaf sdf sadf dsaf sdf sdaf ds
</div>

Upvotes: 1

Stefan Brendle
Stefan Brendle

Reputation: 1564

You can do it by using your two divs as one parent and one child-div. You should test it cross-browser, because I don't know, if it's working in IE ;-) ... also a "clear" would be great :-)

<div style="width: 100%; border: 1px solid blue;  ">

    <div id="1" style="float:left;width:100px; border: 1px solid red; ">
        the first box
    </div>
        the second box
</div>

Example: http://jsfiddle.net/5t6Ak/

Note: Your IDs should never start with a number!

Upvotes: 0

Piet van Dongen
Piet van Dongen

Reputation: 1639

Just make the left one float, the second one will adjust its width:

<div id="1" style="float:left;">
    the first box
</div>
<div id="2">
    the second box
</div>

Upvotes: 2

Related Questions