100% not workin gon left nav menu

[leeboycymru]

I want the left navigation menu to travel 100% down the side, I have made sure all wrapper divs and the body tag are 100%, and it still doesnt move down fully.

http://www.accend4web.co.uk/Allan/docs/Barometers.htm

I also get a huge gap appear at the bottom for no reason. Can anybody take a look for me.

Cheers

Lee

p.s the colours are a bit viviv, so make sure you got your glasses on.

 

[monksnake]

The easiest way I can see to make the maroon navigation area travel all the way down is to specify a height on your
div.

<div id="leftNavigation" style="height:999px">

I have made sure all wrapper divs and the body tag are 100%, and it still doesnt move down fully.

Not sure what that means, but I can tell you that anytime you place a block level HTML element on a page (not floated), that element will take up 100% of the WIDTH of its container if width is not specified, even if the contents do not take up 100% of the width. Height is different, the height of an element is only dependent upon the height of the contents inside that element. So you must specify a height if you want an element to take up more space vertically, or you must put something inside that element with enough height to make the parent element as "tall" as you need.



<.

 

[leeboycymru]

Hi,

What I was trying to do was even if there was no content there that the page would still have 100% height so it always sits at the bottom of the screen. And I was told that to achieve 100% height on a div inside a any wrapper div's then those wrapper div's must have a height of 100% for it to work inside.

Is this right?

Cheers

Lee

will give that a go now

 

[leeboycymru]

That worked a treat, thank you!

Have you any ideas why a big gap appears below (green)?

Lee

 

[leeboycymru]

Ah, I thought so.

That left navigation needs to be 100% height regardless of how many products are inside the content div.

By setting it to 999, wont allow for any amount of stock to appear.

http://www.accend4web.co.uk/Allan/docs/Barometers.htm

 

[monksnake]

Oh the 999 was just an arbitrary number, set it to what you need it to be

<.

 

[monksnake]

And I see in your case, you want to set the div height with id="leftNavigation". In your case, you do NOT want to put an element inside the div and specify the height, you want to put it on the actual element itself

<.

 

[leeboycymru]

Ye basically, I need the marroon colour to travel the length of the site which is determined by the content.

That content is going to eventually be dynamic, so there no fixed size to it.

Lee

 

[monksnake]

Then you have to go about this a different way.

You will have to make a div that has a background image that is maroon on the left side and blue the rest of the way. Inside that div, you need a div floated left that will have the width of the maroon background. Inside that div will contain your <ul>. That way no matter what you put in the content area, the background of maroon and blue will move down with it.


<.

 

[leeboycymru]

I'll give that a go, but what seemed a reasonable assumption that by setting a height to 100% within a wrapper div that is also set to 100%, would result in that left navigation side following the length of the content.

lee

 

[monksnake]

I came across this, this can explain the height 100%

http://www.webmasterworld.com/forum83/5480.htm

<.

 

[leeboycymru]

Thanks for that, so the way I would like for it to have worked, seems is not supported.

Thats a right pain isnt it

Thank you very much anyway

Lee

 

[monksnake]

Yeah height issues are a mess

<.

 

[leeboycymru]

if your still there, can you think of a way to get rid of that space that appears for no reason at the bottom. I have colour coded the div green so you can see....

http://www.accend4web.co.uk/Allan/docs/Barometers.htm

lee

 

[monksnake]

On the declaration of #wrap, you have top:-161px, that will shift your entire page up that much, and that's causing the gap, cause #wrap is to be contained in #wrapper.

taken from your css file:

#wrap {
color: #303030;
width: 768px;
padding: 0px;
BORDER-RIGHT: #000 1px solid;
BORDER-left: #000 1px solid;
BORDER-bottom: #000 1px solid;
position:relative;
[!]top:-161px;[/!]
height:100%;
background-color:#fff;
margin-bottom:0px;
}

<.

 

[Vragabond]

You should also start dealing with the fact that Geckos do not float your content next to your menu. That could be because there is not enough space for it...

 

[leeboycymru]

If you dont mind me asking, but what do you mean by Geckos?

 

[Vragabond]

Firefox, Mozilla, Seamonkey, Netscape, Camino... They all use the same rendering engine that is called Gecko. I have not tested it, but Gecko acts very similar to Opera and Safari rendering engine as well, making your page display correctly only in one browser, that being IE. And with FireFox's evergrowing market share, that is not a good idea, if this is an external website.

 

[leeboycymru]

Right good advice, thank you Vragabond.

Will take that on board and sort it out

cheers

Lee