2 replies [Last post]
Truce77
Offline
newbie
Last seen: 16 years 50 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 7
Points: 0

Hey,

I'm not sure if I'm in the right part of the forum. If I'm not please redirect me.

I have a page using CSS. It has 3 layout divs. The look like this.

-------------------------
Masthead
-------------------------
| | |
| | |
|NavBar | Content |
| | |
| | |

There is also a footer right below it:

-------------------------
Footer
-------------------------

The problem is: That I can't get the footer to stay below the menu and below the content while having the navbar and the content staying beside themselves.

Here's the important CSS code:

/*-------------MASTHEAD------------- */ #layoutMasthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

/* -------------NAV------------- */
#layoutNavBar{
margin: 0;
top: 72px;
left: 0px;
width: 210px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

/* -------------CONTENT------------- */
#layoutContent {
position: absolute;
left: 0px;
top: 72px;
width: 75%;
margin-left: 210px;
padding: 0 3% 0 0;
}
And the page layout looks like this (with more content of course):

<div id="layoutMasthead">
...
</div>

<div id="layoutNavBar">
...
</div>

<div id="layoutContent">
...
</div>

<div id="footer">
...
</div>
If the footer is important (I'm thinking it isn't) here it is:

/* -------------FOOTER------------- */ #footer{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: -1px;
}

#footer img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}

Any help would be appreciated.

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 46 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

CSS Layout Balance

The 'clear: both;' declaration in your footer will only work with floats. So don't expect this to work with absolute positioned elements such as your content div.

I don't think you need to absolutely position your nav and content div. Using floats, you can achieve the same effect, keep the elements within the document flow, and allow the footer to start doing its thing (though you may find more general problems with the footer once you've got it working).

To float your nav div, simply add the declaration float: left. You can remove the position, top, and left declarations, they're for absolute or relative positioning etc. Use margins to position if you have to. Do the same with the content div (this will allow it to 'float' next to the nav correctly). Once this is done, make sure the footer div is immediately after the content div, and keep the clear declaration (you only need clear: left, but clear: both is okay as well).

The next sentence is true. The previous sentence is false. Discuss...

Truce77
Offline
newbie
Last seen: 16 years 50 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 7
Points: 0

CSS Layout Balance

Ok. Your advice was great and it solved a problem I was having before with floats. But the original reason I started using that position: absolute; was because I was having another issue.

When I take the window on the right and scroll over towards the left to resize...when the edge of the window reaches a solid part that cannot be resized anymore it get shifted to the bottom. Here's an ex:

|      | |                            |
|      | |                            |
|NAV   | |CONTENT                  |
|      | |                            |
|      | |                            |

on resize

this is what I want to happen. A horizonal scrollbar should appear.

|      | |         |
|      | |         |
|NAV   | |CONTE    |
|      | |         |
|      | |         |

but this is what is happening:

|      |
|      |
|NAV   |
|      |
|      |
         |              |
         |              |
         |CONTENT    |    
         |              |
         |              |

during regular viewing it's fine, only on resize or if the resolution of the target computer is set very low.

and here's the layout divs I went with.

/* -------------NAV------------- */
#layoutNavBar{
	margin: 0px;
	float: left;
	width: 210px;
	padding: 0px;
	background-color: #eeeeee;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/* -------------CONTENT------------- */
#layoutContent {
	margin-left: 210px;
	padding: 0 3% 0 0;
}

Any help would be appreciated.