two divs with one stated width and one unknown. How to fix this

Question

I have a question.

If I have 2x div elements inside a content div, like "left" and "right".

And I want the left div to have the width:250px;, and the right one with the width:auto;, so the right div fit the browsers window if I shrink it. Is this possible?

I have tried it and the right div jumps right under the left one, instead of being to the right.

.content {width:1000px;}
.left {width:250px;}
.right {width:auto;}

use float: left to .left class – Tamil Selvan C Mar 01 '14 at 10:24 — Tamil Selvan C, Mar 01 '14 at 10:24

score 2 · Accepted Answer · edited May 23 '17 at 10:26

Simply float the left div, and use a left margin for the right one to remove that from beneath the left div:

.left {
    width: 250px;
    float: left;
}

.right { margin-left: 250px; }

And just make sure that you've cleared the float at the end of the container.

For instance:

.content:after { /* clearing the float */
  content: '';
  display: block;
  clear: both;
}

Also, you might want to take a look at Nicolas Gallagher's micro clearfix hack, or this topic on SO.

WORKING DEMO.

two divs with one stated width and one unknown. How to fix this

1 Answers1