CSS side by side div with Pixel and Percent widths

html css fluid-layout
Faizal Balsania picture Faizal Balsania · Mar 17, 2011 · Viewed 26.7k times · Source

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):

Answer

Salman A picture Salman A · Mar 17, 2011

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>

Related questions

Two divs side by side - Fluid display

I am trying to place two divs side by side and using the following CSS for it. #left { float: left; width: 65%; overflow: hidden; } #right { overflow: hidden; } The HTML is simple, two left and right div in a wrapper div. <…

Read More
How to make an element width: 100% minus padding?

I have an html input. The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid). However using width: 100%; causes the input to be 100% + 20px how can I get around this? Example

Read More
Fluid width with equally spaced DIVs

I have a fluid width container DIV. Within this I have 4 DIVs all 300px x 250px... <div id="container"> <div class="box1"> </div> <div class="box2"> </div> <div class="…

Read More