CODEWITHSUNDEEP
htmlcss
alessiop86
alessiop86

Reputation: 1305

Div goes to new line

Here is the site: http://magicdynamic.com/zoom2/

With Firefox the right empty div (#bookingForm and with it also its container #rightColumn) goes always on a new line, while with Google Chrome it goes to a newline only when you zoom.

What i want to do it's obviously avoid it from going to newline.

I tried in order to fix it:

but i couldnt solve the problem.

Can anyone help me out?

And another little question, how can i make my midColumn recognize the whole height of the page without specifying it? (i need it for the background)

Upvotes: 3

Views: 2960

Answers (2)

Hieu Van Mach
Hieu Van Mach

Reputation: 683

You need to put <div style="clear:both;"></div> after <div id="topMenu"></div>

Also it is good css code style when you place header and topmenu in a container, then leftcolumn and rightcolumn in another container and footer in another container. Because the rightcolumn and leftcolumn float left so you need another <div style="clear:both;"></div> to separate them from the footer.

Upvotes: 3

Wex
Wex

Reputation: 15715

There are a couple things you'll want to change. Remove float: left from #footerZone and add clear: both. To make it so your midColumn recognizes the full height of the page, simply add overflow: hidden.

You should read up on clearing floats, since both of your problems stem from this CSS error.

Upvotes: 4

Related Questions