css positioning like a grid

Question

So I am stuck on this seemingly easy problem:

I want my page to be made up of two sections. First is a nav-bar on the left that is always 300px. Next is the content of the page, which should fill the rest of the space to the left.

Both of these elements have position:relative

Let me explain this with code:

#navBar{
    position:relative;
    background-color:#666;
    width:300px;
}
#content{
    position:relative;
    background-color:#999;
    /* what can I put here to make it so, no matter 
    ** what (even on resize), the div this represents
    ** will always go from the end of #navBar to the
    ** end of the entire window?
    */
}

I know I will probably have to use float:left somewhere in here, but I still need to get the width right before I can use float

If I wanted to use jquery, I could do:

var ww = $(window).width();
$("#content").width(ww-300);
$(window).resize(function(){
    ww = $(window).width();
    $("#content").width(ww-300);
});

but I was hoping this was doable in css...

any ideas?

jsfiddle

duplicate of http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width — schellmax, Sep 30 '13 at 15:19

Olaf Dietsche · Accepted Answer · 2013-09-30T15:25:24.480

2

You can just use float: left for the navbar. No need for position: relative

#navBar{
    float: left;
    background-color:#666;
    width:300px;
}

JSFiddle

If the content div might be longer than the navbar and you don't want it to flow below the navbar, you can add a margin-left

#content{
    background-color:#999;
    margin-left: 310px;
    height: 400px;
}

JSFiddle

edited Sep 30 '13 at 15:25

answered Sep 30 '13 at 15:20

Olaf Dietsche

72,253
8
102
198

thanks!! that worked perfectly. I'll accept the answer when I am allowed – Ryan Saxe Sep 30 '13 at 15:21

score 0 · Answer 2 · answered Sep 30 '13 at 15:25

0

Here you go: http://jsfiddle.net/GvC4k/1/

I thought you might like the menu 100% height as well.

 body,html{height:100%; font-family:Arial;}
.menu{float:left; width:300px; background:#dadada; height:100%;}
.content{background:#888888;}

answered Sep 30 '13 at 15:25

visualex

736
12
17

css positioning like a grid

jsfiddle

2 Answers2