CODEWITHSUNDEEP
csshtmlwidth
TomDogg
TomDogg

Reputation: 3937

How to have 2 HTML block elements (with varying widths) "inline", covering the entire with of the parent element?

how can I have 2 block elements ("block" because I want to apply a background image to one of them) aligned (one on the left, one on the right), where:

Like so:

<div id="some_parent_element_with_fixed_width">
    <div class="left">Here should be some text of varying length...</div>
    <div class="right">Here should be displayed a x-repeat background image on the entire remaining width...</div>
</div>

Thanks a lot for any cross-browser solutions to this! Tom

Upvotes: 2

Views: 272

Answers (1)

Guffa
Guffa

Reputation: 700342

Use float:left on the left element, that will make it take up only the size of it's content. Use overflow:hidden on the right element, that will automatically use the rest of the space as the default for the width property of a block element is auto.

.left { float: left; }
.right { overflow: hidden; background: url(someimage.gif) repeat-x; }

Upvotes: 1

Related Questions