Question

I am trying to use CSS to get a DIV to fill the remaining page width, after a fixed-width div on the left (and below a fixed-height header)

The CSS I have is:

body{margin:0;padding:0}
#header{height: 100px; background:#ccccff;}
#left {position:absolute; left:0; top:100px; width:200px; background:#ccffcc;}
#main {position:relative; left:200px; background:#ffcccc;} 

The HTML is:

<div id="header">Header stuff here</div>    
<div id="left">Left stuff here</div>    
<div id="main">Main stuff here</div>

(head and doctype omitted here for brevity)
When it is rendered, the main div is still full page width, meaning the right-hand edge is 200px off the right edge of the browser. How can I get the main div to fill the remaining width?

(eventually I will want to put other divs inside main, and make their widths expressed in % relative to the main div)

Is this even possible?

Answer 1

Don’t use position. Use Floats. Float the “left” div left, set its width. Give the “main” div a left-margin of the width of the left div, and set the width to auto.

#left { float: left; width: 200px;}
#main {margin-left: 201px; width: auto;}

Example here: http://jsfiddle.net/GhtHp/1/