CODEWITHSUNDEEP
htmlcss
Hard worker
Hard worker

Reputation: 4046

How to make second adjacent div have auto width that fills the parent container

<div class="parent clearfix" style="width:100%; height: 100px">

<div style="float: left; width:150px; height: 50%">
</div>

<div style="float: left;" class="target">
</div>

</div>

I would like to make class 'target' div be such that it's width is 150px less than the width of the div with class 'parent clearfix'

How do I accomplish this? In the above example the parent div is the child of another div which has a specified width (bit this specified width can change).

Upvotes: 0

Views: 1029

Answers (3)

Linus Caldwell
Linus Caldwell

Reputation: 11058

You may use display: table for the parent and display: table-cell for the children (Fiddle).

<div style="width:100%; height: 100px; display: table">
    <div style="display: table-cell; width:150px; height: 50%">
    </div>
    <div style="display: table-cell;">
    </div>
</div>

But it will not work in older browsers.

Update

Another way is to give a margin-left: 150px to the second column and a position: absolute to the first. This will work in most browsers, but of course it's not a clean version and you'll come in trouble if the first columns content is longer than the second ones. Fiddle.

Upvotes: 4

Akshay Khandelwal
Akshay Khandelwal

Reputation: 1570

It should be just width: calc(100%-150px) Supported in only CSS3 supporting browsers

Upvotes: 1

tmerrick
tmerrick

Reputation: 38

Take a look at http://alistapart.com/article/holygrail for a semi-fluid layout. I think this is exactly what you are looking for.

Upvotes: 0

Related Questions