CODEWITHSUNDEEP
htmlcssposition
Ryan Saxe
Ryan Saxe

Reputation: 17829

css positioning like a grid

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

Upvotes: 0

Views: 61

Answers (2)

visualex
visualex

Reputation: 756

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;}

Upvotes: 0

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

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

Upvotes: 2

Related Questions