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>

Haile

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>

Akbar

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

Barcus

Be careful with adding paddings and borders though. – Megaphone

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/

Oviduct

This solution does not work for relative positioning. jsfiddle.net/EpA5F/130 – Unfailing

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.

Dissipation

Answer 5

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/

Atul

Can I ask what you mean? The page you link to shows calc is supported in IE 10. – Atul

Yes, and that means it works since IE 10 version. Old versions like 7, 8, 9 would not work properly. So when you're using CALC function, your website has higher requirements for visitors and some of them could have problems with it. – Diazo

I honestly don't care about those users especially 7 or 8. If a user is using IE 9 a lot of my websites won't work but that's okay 98% of users it'll work perfectly for. And that's via world wide stats. I fully believe we, the developers, should stop putting backward compatibility in to make sites and other software work to accommodate people that should have upgraded 5 years ago. We only strangle ourselves and increase cost and complexity. I used flexbox on my last site because I wanted to. No one has complained. – Atul

Answer 6

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.

Dissipation

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

Boltonia