A css issue, asking for help.

Question

Ask for help. I am a css novice, and made a template. The template shown above in IE7 normal; but in Mozilla Firefox above, there are misplaced situation. I should ask how to solve this problem?

This template presentation addresses: http://blog.512059.cn

**

In the # bgtop have added overflow: hidden;. Problem solved. Very grateful to prodigitalson and Eric Muyser help me

**

Answer 1

In order for .bgtop to expand with the length of the element inside you need to clear the floated elements. In this case the easiest way to do this is to set the width on .bgtop in pixels and then set the overflow to hidden.

.bgtop { width: 816px; overflow: hidden;}

there are a few other ways to clear floats, for additional methods google for "float clearing" or something similar.

Answer 2

In addition to "overflow: hidden", you can solve float issues with "clear: both". Basically just insert a spacer at the bottom of the #page div:

<br clear="all" />

or

<br style="clear: both" />

The latter doesn't work for me in this case, without adding some text in the tag.

You could make it a div, and use CSS.