How to avoid a top margin?

I have a simple layout (header, menu, slideshow, main content, sticky footer). You can see the example here!. The problem I have is the following. I try to avoid to use height for the different divs to make the layout as fluid as possible. Everything works fine for the header, the menu and the slideshow but I have problems with the main content. On the main div I need to use a top margin with the height of the photos that are in the slideshow to make it appear under the slideshow as you can see in the example If I take that top-margin out the content appears on top of the slideshow. I would prefer not to use that top-margin. How would I make the main content appear under the slideshow without using that top-margin?

Thank you in advance!

I have been playing arround with the display property and different clears but notting seems to help.

How about this?

#slideshow {padding-bottom: 36%;}

Add or remove some padding to taste.

Hi Ralph. Can you please explain the 36% please

It’s a random number, so adjust to taste. The script is resizing the images, and their height is always around 39% of their width. So this is a common technique to set a height for the wrapper—via padding-bottom.

Actually, you’ll probably want padding of something like 44% to give the content below more space.

Hi Ralph. Thank you very much. Something learned again

Hi, donboe.

You could consider changing #main {margin-top:450px} from 450px to somewhere around 36% to 40% and see if that works for you.


change #main {margin-top:450px} to zero (as preferred), and ADD #slideshow {padding-bottom:36%} and see if that works for you.

There are some hidden menus that fill part of the #slideshow area and will interact with the percent margin or padding, but I don’t think it will be significant.

Just a thought.

Off Topic:

Ninja’d by Ralph :slight_smile: