Need Help With Fluid Css.... Restraining the different sections

Hi,

I'm using a 2-column completely fluid layout with a header and footer.

Here is the basic layout.
Here is the CSS file.

Now the problem, as you can see, is that the footer is overlapping the menu if the content is less. I tried to overcome this problem by using <br> tabs immediatly after the content section, but it's not flexible and doesn't work well with high resolutions.

What I need is that the footer always have a gap of minimum 10px or so from the menu if the content section is shorter than the menu section. If the content section is longer than the menu section, the footer section should then maintain a gap of 10px with the content section.

Any ideas?

Hey Abhiram.

I downloaded your codes and tested. This should work:

Add the following to div#footer

clear: left;margin-top: 10px;

It always starts from the left edge of the screen and always leaves atleast 10px margin to top of the div from the closest element (the content or the menu box).

Hopefully this was what you were looking for and helped.

-Hercco

Quick addition: also add margin-bottom: XXpx; to the leftbar.

Great! It works. Thanks a lot. I was really pissed off with it.

Sorry about double posting, but... on the same topic, check out this site:

https://www.archlinux.org/

If we resize the the width and make it smaller, the elements adjust themselves upto a certain extent. If we reduce it beyond that, the elements don't adjust anymore and a horizontal scroll appears. How does he do this. I'm kinda new to CSS... still trying to get over tables. I've seen the source of the CSS files he used and none of them have any float statements. I thought the only way to make resizable webpages was using float. How did he do this?