CODEWITHSUNDEEP
htmlcssfluid-layout
Faizal
Faizal

Reputation: 1843

CSS side by side div with Pixel and Percent widths

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>

Upvotes: 19

Views: 27551

Answers (7)

ZuzEL
ZuzEL

Reputation: 13675

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

Upvotes: 0

Salman Arshad
Salman Arshad

Reputation: 272386

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>

Upvotes: 41

Colin Wiseman
Colin Wiseman

Reputation: 868

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/

Upvotes: 1

Guillaume Schuermans
Guillaume Schuermans

Reputation: 906

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.

Upvotes: 1

Hussein
Hussein

Reputation: 42818

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/

Upvotes: 2

erickb
erickb

Reputation: 6299

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

Upvotes: 2

Guillaume Schuermans
Guillaume Schuermans

Reputation: 906

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.

Upvotes: 0

Related Questions