Why spacer doesn't work anymore?

HTML & CSS
1

Hi guys,

I use these codes below,


.spacer {
	height:75px;
}

For margin, it works before.
But when I tried to modify the codes and add a header.
It doesn’t work anymore.

You can see the page here,
http://myonlinesmallgroup.com/warren/pathways/fixform/

Anyone would like to explain why?
And how to fix this.

Thanks in advance.

2

You have floated elements around your .spacer elements, you simply need to add clear: both to your .spacer class and it should work normally again.

3

It’s not working as you intend because everything else is floated. You could change that by adding clear:

.spacer {
	height:75px;
       [COLOR="#FF0000"] clear: both;[/COLOR]
}
4

The spacer doesn’t work because the boxes above it are floated. Floated boxes are removed from the normal flow and have no height. I don’t really see why div.left is floating anyway. Delete the float:left and they seem to work fine… and the space works, too.

Want to try something interesting? Before you delete float:left, Add clear:both; to the spacer code. (this is the classic HTML float clearing technique.)

5

And going beyond what we’ve said above, the next thing to say is that there are better ways of spacing things than using empty elements. For example, as ronpat said, remove the float from the heading and give it a bottom margin if you want space below it. :slight_smile:

6

Thanks guys,

Actually that is not my CSS work, it is the work of the previous web designer.
I’m just fixing his mess. lol

By the way the clear: both works!
Problem solved!

7