Two columns, left with fixed width, right with dynamic width

Question

i am trying to implement a content where i need to have a section of 100% of the browser width and inside it i need to have in the left size a div with 200px width and in it's right i need to have a div with dynamic width depending of the browser width. Example .. browser = 900px -> left div 200px right div 700px. And both of the divs have dynamic height depending how much info i put in them .. the wrapper div will take the biggest of those 2 div height..

So far i did something like this html

<section id="wrapper">
  <div id="list">
  </div>
  <div id="grid">
  </div>
</section>

css

#wrapper {
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
    overflow: hidden;
}

Now i need to css the #list and #grid divs. I hope there is an efficient solution to this because later on i will have the same stuff to do inside the #grid div :)

Thank you in advance, Daniel!

Answer 1

You can do it with CSS. The trick is to use a float (the left div) and a non-floating div (the right one). Also the left (floating) div, needs to have a minimum height, otherwise the right (non-floating) div will take the space of the left column if the left doesn't have any content.

EDIT: The right <div> should also have the following rules:

overflow: hidden;
display: block;

The overflow: hidden makes the right div behave as a column, otherwise its content would flow around the left div.

Note that the #wrapper doesn't need a width because the default width of a <div> is 100% (since you said it will take the full width of the browser window), and also remove its margins.

Here's an example (I changed the <section> to <div> for the sake of the non HTML5 browsers but it works the same).

I placed background colours to distinguish all the elements.

http://jsfiddle.net/pmv3s/1/

Here is the full screen version: http://fiddle.jshell.net/pmv3s/1/show/light/

The CSS:

#wrapper {
    padding: 40px 0;
    overflow: hidden;
    background-color: red;
    min-height: 5px;
}
#list {
    float: left;
    width: 200px;
    background-color: green;
    overflow: hidden;
    min-height: 100px;
}
#grid {
    display: block;
    float: none;
    background-color: blue;  
    min-height: 100px;
    overflow: hidden;    
}

​

Answer 2

here's a solution for you using a little bit of jQuery as I don't think that there's a pure CSS solution to your problem (but I may be wrong).

http://fiddle.jshell.net/L32uj/