If you take a look here:
The CSS can be viewed here:
You will see a header above two floating elements.
The right floating element has a fixed width of 140px.
The left element has a width of 78% of its parent element, the header.
The problem is that, if you have a big monitor or a high resolution, the space between the right and left floating elements is way too wide.
It is just the opposite for small monitors or low resolution, they actually start to overlap and then eventually, the left float will fall beneath the right float.
The problem is simple, the left element is 78% of the headers width. The larger the monitor/resolution, the wider the header, the wider the header the wider the left element is. However, the right float will remain 140px.
If the header is 500px wide, then the left float is 390px wide. The right float remains 140px wide. There is now a space of -30px; the left float would now be under the right float.
However, if the header is 1300px wide, the left float would be 1014px wide. The right float remains 140px wide, leaving a space of 146px between the two. It now looks bad.
If you don't like math, just resize your browser, you'll see what I mean.
So, for the long awaited question, how do I fix this? I really don't know what to do...