Question

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:

• Put both (rightColumn and leftColumn) as float left
• Put both as float left + width dimensions in pixel
• Position relative and left

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)

Answer 1

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.