Div Floats Not Working Well. Is it my math?

I have a site located here:


The two DIVs in question are the #primary and #secondary. In Safari they line up and position themselves side by side. But on the iPhone, the #secondary DIV is spilling over and is positioned underneath the #primary. Is that something someone could help me with? Is it simply my math is off a bit?

Thanks in advance!


Make sure that you have declared position:relative and float:left to both divs, that they do not have widths declared, that the container div is wide enough to hold both divs at the same level and that both of them divs are not clearing anything (clear:none). Also if you have issues getting the container div to span the whole height of the contained floated divs set its overflow to auto. This should fix your problem.

Actually you can declare widths to the divs but make sure that the sum of both plus margins, paddings and borders is not greater than the container div’s width.

It is very useful to set some universal properties that will help you avoid potential problems with browser specific default stylings.

I use to do it like so:


This will save you a few hours of work per website.