My Layout Breaks When I Add Content. Why?

Imagine a simple layout like this:

<div id="container">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>

HTML:

I have set a background image for my header and footer divs, and a thin background image to repeat vertically down my main div. The images together make a continuous box.

However, when I add content inside the main div, a gap appears atop and below it. There's no longer a continuous box.

I fixed the problem by setting the thin background image to repeat vertically down the container div instead of the main div. But does anyone know why it doesn't work when I set it to repeat down the main div?

 

Are you able to give us the link? It'd be easier to work out then.

 

You are probably experiencing margin collapse. See http://complexspiral.com/publications/uncollapsing-margins/, or Google the terms for more info.

cheers,

gary

 

Thanks, Gary.

That is indeed my problem.

I tried to give you a rep point but was not allowed. I must have given you rep recently.

 

yeah, just use clearfix

 

That makes absolutely no sense.

gary

 

Set each DIV with "margin=0" and "padding=0", does this fix things?

These kind of layouts can be a pain sometimes it's easier using a table to hold all the divs in place.

 

That's the first thing that I tried. It didn't work.

Tables?

Come on, dude. You should only use tables to present tabular data. For positioning, use CSS.

Nonetheless, thanks for your attempt. As I explained above, I fixed the problem by setting the main div's background image to vertically repeat down the container div instead. All I wanted was an explanation as to why it wasn't working when I set it to repeat down the main div. This 'margin collapse' phenomenon was the answer.

I appreciate all the help, guys.

 

Well, but if there were no margins to begin with, then there wouldn't be any collapsing. So also setting everyone's margins to 0 should have also removed gaps? (I assume Gary was referring to default margins on your added content like p's, where their margins collapse into the tops of their div parents, your main containers). Child margins basically transferring to their parents is so freaking unintuitive, who thought that was a good idea??? Margin collapse itself is unintuitive. Bleh...

Though only removing the margins on just the divs wouldn't have worked... the margins would have had to be removed from the content (p?) tags.

I'm not even sure anymore if divs have default vertical margins in any browser?

 

Yeah the rep system is a joke, there are people who I repped ages ago, and I still cannot give them rep today.