How automatically adjust div's width using CSS?

Question

HTML:

<div class="wrapper">
    <div class="left">Some text here</div><div class="right">Hello Stack Overflow</div>
</div>

CSS:

.wrapper {
    border: 1px solid black;
    width: 400px;
}
.left {
    border: 1px solid green;
    display: inline-block;
}
.right {
    border: 1px solid red;
    display: inline-block;
    float: right;
}

I would like to force the width of the green div to be as big as possible, according to the width of the red one. The width of the red div can vary according to div's content. So, for example, if the width of the red div is 150px, the width of the green one should be 250px. This should always be true:

green div width + red div width = 400px

How could I achieve this using CSS ?

No Javascript please...

Kalessin · Accepted Answer · 2011-05-03 07:36:27Z

5

As sandeep said earlier, but force the green div to take up as much space as possible.

.wrapper {
    border: 1px solid black;
    width: 400px;
    display:table;
}
.left {
    border: 1px solid green;
    display: table-cell;
    width: 100%;
}
.right {
    border: 1px solid red;
    display: table-cell;
}

Note that divs-as-tables is not supported by IE7 and below.

answered May 3, 2011 at 7:36

Kalessin

2,3022 gold badges22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sandeep · Accepted Answer · 2011-05-03 05:36:33Z

1

make be that's you want http://jsfiddle.net/sandeep/eGphW/

.wrapper {
    border: 1px solid black;
    width: 400px;
    display:table;
}
.left {
    border: 1px solid green;
    display: table-cell;
}
.right {
    border: 1px solid red;
    display: table-cell;
}

you can use div as a table.

answered May 3, 2011 at 5:36

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

1 Comment

Misha Moroshko Over a year ago

Not exactly. In your example the red div has an extra space on its right. The width of the right div should be as small as possible (and the width of the green div should be the rest).

Collectives™ on Stack Overflow

How automatically adjust div's width using CSS?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related