CODEWITHSUNDEEP
htmlcss
Patrick Reck
Patrick Reck

Reputation: 11374

Set width to remainder of parent - dynamic width

I have 2 div inside a fixed-width container.

div1 has a dynamic width, with a maximum of 50%. I want div2 to fill the remainder of the containers width.

<div id="container">

    <div id="left"></div>

    <div id="right"></div>  

</div>

Here's an example on jsfiddle.

Fully expanded as supposed to: http://jsfiddle.net/RuD74/

Containers background visible due to right not expanding: http://jsfiddle.net/hgpcp/1/

How can I achieve this?

Upvotes: 0

Views: 76

Answers (2)

bunndan
bunndan

Reputation: 2827

Updated JFiddle: http://jsfiddle.net/d5U96/2/

I see what you are trying to do. Instead, set the second div to have:

#right {
    overflow: hidden;
    height: 100%;
    background-color: blue;
}

By doing this, it takes up all available width that's left except for the space occupied by the first floated div. Hopefully this does what you need.

Upvotes: 1

Milebril
Milebril

Reputation: 95

A other thing that you can use it that you set the minimum width of your red/left box to 50%. This depends on what you would like to do with it.

#left {
float: left;

min-width: 50%;
max-width: 50%;
height: 100%;

background-color: red;

With this your div1 gets the minumum width of the helf of your block. The only negative thing about this is, that you can't make it smaller in time, if you'd like.

Upvotes: 0

Related Questions