7 replies to this topic

[Devilman]

I'm having a problem with CSS I am fairly new to it all and am still learning the very basics really. I downloaded a template and am working on it just playing about trying to expand my knowledge further but one thing has really been bugging me. I have a simple header, horizontal navigation then the main content followed by the footer. However I am trying to create sidenavs each side of the main content area that line up with the ends of the nav and footer I do float one sidenav to the left and one to the right but the right one just falls out of place of the other two. Ive tried messing with the widths in pixels to see if thats why its falling and its not..any ideas??
Here are the images::


This is how I want the site to look, if i get it right I will expand it so there is more width for the side navs.


This is what happens when I try to do it.


What the template looks like normally...

If anybody knows what I am doing wrong I have uploaded the .rar file to rarhost so that they can edit it and show me what I was doing wrong.
http://www.rarhost.c...oad-ssdsm1.html thats the link to my rar file with the index, images and css file included.

[Jacorre]

You may want to check out some of the examples here and look at the code to set up the 3 columns.

[rc69]

The right nav div needs to be moved up above the center column div, and you might need to apply a margin to the left side of the left nav, and right side of the right nav, or to the body.

[Devilman]

I started again and have the layout looking how I want it however I want the side navs to be 100% length so they always expand to the bottom of the page but they just wont do it. I read a tutorial which said to put

	height:100%;

in the body and then place height: 100%; in the divs I want to drop however it doesn't work I think it might be my design i'm unsure but it really would finish my layout off if I could get it working.

[Devilman]

Thats how I want the layout to look so that the sidenavs are always the same length as the content in the middle. To do that I had to set them at exact pixel height which obviously wont work..I'm lost and can't work out how to do it.

[rc69]

You actually have to put height:100% on everything containing and including the nav divs.
This is something everybody has problems with... nobody likes it. But, A List Apart has a tutorial about faux columns which may lead you to a way of solving your problem.

Edited by rc69, 28 September 2006 - 09:14 PM.

[Devilman]

Yeah I have already tried that It probably has something to do with my dippy coding. It's quite annoying really I add 100% to the container, sidenavs and main content. I can't to the header or horizontal nav at the top because they are already specified a certain height.

[Devilman]

I've just realised that it does work in internet explorer so it's a problem with firefox. Is there a fix or a way around it for firefox?