CSS Forum

**Arenlor** · 04-05-2008, 01:25 AM

First off, here's the relevant CSS (cutting out the parts that have only to do with color etc)

Code:

body {margin:0;padding:0;height:100%;}
html{margin:0;padding:0;height:100%;}
div#header{position:relative;}
div#container{margin:0 auto;height:100%;}
div#content{float:left;width:80%;}
div#navigation{float:right;width:20%;height:100%;}

As for the trimmed down snippet of code used

HTML Code:

<body>
<div id="container">
    <div id="header">
        <h1>Contact Book</h1><hr>
    </div>
    <div id="content">
        <div class="female">
            <h2><a class="female" name="1">Jane Doe</a></h2>
        </div>
    </div>
    <div id="navigation">
        <p><a href="#1">Jane Doe</a></p>
    </div>
</div>
</body>

That's a screenshot of how the navigation pane looks, what I want is for it to be extened all the way to the bottom with everything else.

**chrishirst** · 04-05-2008, 05:32 AM

maybe reading the "stickies" would be a help

http://www.webmaster-talk.com/css-fo...l-browser.html

they are at the very top of the forum for a reason.

**Capt Quirk** · 04-05-2008, 12:41 PM

Ok, if after reading the sticky, and reading the tutorial, my div still doesn't extend fully, what is next? I thought that is why this board is here, to answer questions and help.

**serandfae** · 04-05-2008, 12:59 PM

Then you post a link to your code and we try to help. The stickies are there for common problems to allow us to better tackle the, uh, quirkier ones.

That is, they've taken the time to research it so you don't have to, so take advantage of it.

tim

**Arenlor** · 04-05-2008, 01:20 PM

The page fills the browser (I used that sticky to learn that) but for some reason this one div just doesn't want to extend all the way, it does extend partially below the bottom of the viewscreen but only by the amount that the toolbars take up. That's why I came here, because I am confused as to what is causing this since I thought it would go the whole way down (without the height:100% it only extends to the bottom of the content of the div and doesn't extend down to where it currently does, which is 100% of the viewscreen)

**serandfae** · 04-05-2008, 01:35 PM

I would take height:100% off of html and body. It's sufficient to have it on container. Keep in mind that the divs nested within it will take up 100% height of the parent div. Do you have this uploaded somewhere to take a more in-depth look?

tim

**Arenlor** · 04-05-2008, 06:30 PM

http://arenlor.com/test/

**bakerc** · 07:54 PM

This might not be what you need but can you not set the height of the of the Navigation to around 2100px? it should give the look you need but not sure if its the best (clean) way to do it.

**Gilligan** · 04-07-2008, 08:17 PM

This will work with position:absolute; but I haven't seen a website without absolute positioning on 100% divs, even though its not god to have absolute positioning.

**bakerc** · 04-07-2008, 10:13 PM

The div he wants to extend to the bottom of the page if floated, I may be showing my lack of knowledge but I thought the only way to do this was to set a height as a floated div is outside normal document flow and would not react with others divs (if that makes any sense)

**Arenlor** · 04-08-2008, 01:31 AM

So how are you suggesting I change this?

**bakerc** · 04-08-2008, 02:01 AM

Just clicked on the link and it looks like you have sorted it

**Arenlor** · 04-08-2008, 06:04 AM

It's not working for me, what browser are you using?

**Gilligan** · 04-08-2008, 06:38 AM

Try position:absolute; of the div you want to have 100% height. Just want to see if my theory is right

**bakerc** · 08:11 AM

Quote:

It's not working for me, what browser are you using?

IE7

Quote:

Try position:absolute; of the div you want to have 100% height. Just want to see if my theory is right

If that doesn't work, just set the height on the Navigation div (which is floated right) to the height of the page (approx 2100px) or set the background the same colour as the body background which should give the look your going for.

**Gilligan** · 04-08-2008, 08:16 AM

Bad idea, what if the content of the page grows, that means he'd have to change the size for every page.

**bakerc** · 04-08-2008, 10:03 AM

If he uses the same colour for the background it wouldn't but I do know what you mean about setting the height.
How should he do this with a floated div then? like I said in a previous post I may be showing my lack of knowledge - I would be grateful if you could tell me (and the OP) a better way to do this with a floated div.

**Gilligan** · 04-08-2008, 10:26 AM

The only way I have found is adding

Code:

position:absolute;

to the div you want to have 100% height.

**LadynRed** · 04-08-2008, 11:08 AM

And that WILL remove the div completely from the document flow.
If the stickie was referenced the answer is in there. The alternative is to use the faux columns method, much easier, less hair-pulling.

**bakerc** · 04-08-2008, 11:53 AM

Quote:

If the stickie was referenced the answer is in there

I have had a look and found this as the link from the sticky doesn't explain about floated divs
http://www.communitymx.com/abstract.cfm?cid=A7E88

"Multiple Column CSS Layouts that Fill the Browser Window"

Is this the one your on about LadynRed - I belive you have to join the monthly subscription service to view this (thats fine if its the case, just want to make sure its the right one)