CODEWITHSUNDEEP
htmlcsslayout
zdebruine
zdebruine

Reputation: 3807

HTML/CSS Basic Layout Issues

I'm designing a webpage that will fit entirely within the browser window, so scrolling is hidden.

I have a headerbar at the top of the page of width 100% and height 40px. Beneath the headerbar I have a navigation bar of width 15% on the left side of the page, and a content area DIV of width 85% on the right side of the page.

I cannot get the height of the navigation bar and the content area to dynamically extend to the bottom of the page and no further. What is the best way to make both the navigation bar and the content area extend to the bottom of the page in all screen sizes?

For reference, my HTML code looks like:

<div id="headerBar">Header Bar</div>
<div id="navigationBar">Navigation Bar</div>
<div id="contentArea">Content Area</div>

and my CSS code looks like:

#headerBar{
    width:100%;
    height:40px;
    background:rgb(35,35,35);
}

#navigationBar {
    width:15%;
    height:100%; /* Note that this doesn't work */
    background:red;
}

#contentArea {
    width:85%; /* if I use any padding or margin this box exceeds the browser width */
    background:blue;
    height:100%;  /* as with #navigationBar, this doesn't work */
    float:right;
}

+1 to any solutions! Thanks in advance!!

Upvotes: 0

Views: 255

Answers (3)

Aaviya
Aaviya

Reputation: 1190

Try this:

#contentArea {
    height:auto !important; 
    height:85%; 
    min-height:85%;
}

Upvotes: 1

SVS
SVS

Reputation: 4275

here is the fiddle: http://jsfiddle.net/surendraVsingh/cFkaU/

CSS

html, body { height:100%; }
#headerBar{
    width:100%;
    height:40px;
    background:rgb(35,35,35);
}

#navigationBar {
    width:15%;
    height:100%; /* Note that this doesn't work */
    background:red;
    float:left;
}

#contentArea {
    width:85%; /* if I use any padding or margin this box exceeds the browser width */
    background:blue;
    height:100%;  /* as with #navigationBar, this doesn't work */
    float:right;
}​

Upvotes: 2

flyx
flyx

Reputation: 39638

If you really, really want to have a layout like this, you can do it with position:fixed;:

#headerBar {
    background:rgb(35,35,35);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
}
#navigationBar {
    background:red;
    position: fixed;
    top: 40px;
    left: 0;
    bottom: 0;
    width: 15%;
}
#contentArea {
    background: blue;
    position: fixed;
    top: 40px;
    right: 0;
    bottom: 0;
    width: 85%;
}

However, I do not recommend it. It will cause severe problems with small screens etc.

Upvotes: 2

Related Questions