CODEWITHSUNDEEP
csslayout
NickJ
NickJ

Reputation: 9579

Get DIV to fill remaining width

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?

Upvotes: 3

Views: 159

Answers (4)

GiantDuck
GiantDuck

Reputation: 1064

Yes, it's easily possible with CSS calc. Unfortunately CSS calc is only supported in Chrome so far.

Here's a better way:
HTML:

<div id="header"></div>
<div id="left"></div>
<div id="main"></div>

CSS:

#header{height: 100px; width: 100%; background:#ccccff}
#main{position: absolute; left: 200px; right: 0; background:#ffcccc}
#left{width: 200px; left: 0}

Having #main exactly 200px from the left and 0px from the right gives you the full width minus #left

Upvotes: 0

Ashwin Singh
Ashwin Singh

Reputation: 7375

Instead of using positioning which is considered evil, just use floats.

#left {float:left; width:200px; background:#ccffcc;}    
#main {margin-left:200px; background:#ffcccc;}

DEMO

Upvotes: 1

Michael Dunlap
Michael Dunlap

Reputation: 4310

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/

Upvotes: 1

Scott S
Scott S

Reputation: 2746

Does this accomplish what you're looking for?

HTML - 

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

CSS - 

div {
    border: 1px solid black;
}

#left {
    float: left;
}
​

Jsfiddle - http://jsfiddle.net/xzWK5/

Upvotes: 0

Related Questions