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

Question

I am trying to implement content where I need to have a section of 100% of the width of the browser, and inside it I need to have a div in the left size of 200 pixels wide, and in it I need to have a div with dynamic width depending on the width of the browser. Example .. browser = 900px -> left div 200px right div 700px. And both divs have dynamic heights, depending on how much information I put in them. The div wrapper will take the largest of these two div heights.

So far I have been doing 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 take a photo of div #list and #grid. I hope there is an effective solution to this, because later on I will have the same stuff as inside the #grid div :)

Thanks Daniel!

Answer 1

You can do this with CSS. The trick is to use float (left div) and non-floating div (right). Also, the left (floating) div should have a minimum height, otherwise the right (non-floating) div will occupy the space of the left column if there is no content in the left.

EDIT: The <div> rule must also have the following rules:

 overflow: hidden; display: block; 

overflow: hidden makes the correct div lead like a column, otherwise its contents will flow around the left div.

Please note that #wrapper does not require width, because the default width of the <div> is 100% (since you said that it will occupy the entire width of the browser window), and also remove its fields.

Here is an example (I changed <section> to <div> for non-HTML5 browsers, but it works the same way).

I placed the background colors to distinguish all the elements.

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

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

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 is a solution for you using a bit of jQuery since I don't think there is a clean CSS solution for your problem (but I could be wrong).

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