CSS layout question

footer causes problems

[globay]

I am using the following structure for my data:

<header />

<main>
<content/>
<navigation/>
</main>

<footer />

and it should look like this:

¦header-----¦
-------------------
¦N¦content--¦
¦A¦---------¦
¦V¦---------¦
--¦---------¦
--¦---------¦
-------------------
¦footer-----¦

How can I place the navigation bar at the left side, that it won't be displayed on top of the footer?

Thanks,
--
globay

[MWpro]

How can I place the navigation bar at the left side, that it won't be displayed on top of the footer?

Not really quite sure if I understand what you're asking, but I interpreted it as having overlapping problems with using float. Have you tried a clear: both; in your footer div?

[hafnius]

HI globay

Well im not sure i understand fully either.. :)

But lets see. i use a similar structure for my design

<header/>
<main content/> {margin-left:146px;width:xxxpx;}
<nav> {position:absolute;(your numbers)
<footer>

This way the content fits in to the margin of the main content and you wont have the prob with the footer overlapping since no floating is used.

Kind Regards
Hafnius

[globay]

hafnius, thanks for you reply,

this is what my css file looks like. Still, if the navigation bar is longer, than the content part, it will overlap the footer.

#content {
margin-left: 200px;
width:550px;
}
#navigation {
position:absolute;
top:100px;
left:10px;
width:180px;
}
#footer {
}

MWpro, I don't quite understand how to implement clear:both.

Thanks,
--
globay

[globay]

I finally found the solution. For everybody who is interested, there is a great site: [fu2k.org...]

Thanks,
--
globay

[jbinbpt]

Great find .. Answers a lot of questions

[globay]

especially interesting seo-wise. you can choose, which column should be displayed first...