CSS side by side div with Pixel and Percent widths

Question

I have two div's (side by side) inside a parent div, i want right div to occupy 100% of remaining space (i.e. 100% - 200px) and should always stay next to left div (not below left div):

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>

Answer 1

Since you have only one fixed width column, float it left and that is it. As for the second column, do not specify float and width; this makes sure it is 100% wide. But you must add a left margin; otherwise the second column will interfere with the floated column e.g.

• aqua background will appear behind blue background (turn off the blue background to see what I mean)
• if second column becomes taller than first one, additional content will start appearing below the first column.

<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>

Answer 2

make the parent wrapper float. Also you would probably want to remove the width: 100% in the second child div. And have its width set by the amount of content inside. Or you could have percentage for both child divs. Example 30% and 70%.

Demo here

Answer 3

Add position properties to your right div. Left div 200px and right div occupies remaining space.

#right{
    background-color:Aqua;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    left:200px;
}

Check working example at http://jsfiddle.net/EpA5F/1/

Answer 4

Ok, so on newer browsers we will be able to use display: box; and box-flex: 1,... properties. I am currently using this in a webproject where only Chrome is required, so this new CSS3 thing, solved a lot of issues for me.

Answer 5

your left div should have float left and its pixel width using position relative. Your right div should only have position relative and maybe an overflow hidden. This should fix your problem. No need to use the use the div that clears the float.

Answer 6

The accepted answer is good, but I had an issue where the right column underlapped my subnavigation as it was floating as well.

With modern browsers you can now have all elements floating and get the same effect with cooler CSS. Using "width: calc(100% - 380px);" means you can float your elements, get them positioned properly, and look cool...

.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }

Demo http://jsfiddle.net/auUB3/1/

Answer 7

If you want right div to have constant width:

 <div style="position:relative">
   <div class='wrapper'>
      <div style="width: 70%"></div>
      <div style="width: 20%"></div>
      <div style="width: 10%"></div>
      <div style="clear:both"></div>
   </div>
   <div class="constant-width"><div>
 </div>

And CSS

 .wrapper{
     margin-right: CONSTANTpx;
 }
 .wrapper div{
     float:left;
 }
 .constant-width{
     top: 0px; right:0px; position:absolute;
     width: CONSTANTpx
 }

Works good without borders

JSFiddle