div out of line

Hi all,

I've got a problem which has doing my head in for couple of days now; i have
2 div's as follow:

#diva {float:left; width: 600px}

#divb {float: left; width: 220px}

then in the html:
<div>
<diva></div>
<divb></div>
</div>

So that diva and divb are next to each other in 1 line. This works on
resolutions 1024*768 or higher; but on 800*600 and lower; divb appears
underneath diva.

Is it possible that diva and divb are always next to each other; and if the
resolution is too low then create a horizontal scrollbar?

I hope i explained it clearly enough but let me know if in doubt.

Kind regards

T

toffee wrote:

i have 2 div's as follow:

#diva {float:left; width: 600px}

#divb {float: left; width: 220px}

then in the html:
div
diva></div
divb></div
/div

So that diva and divb are next to each other in 1 line. This works on
resolutions 1024*768 or higher; but on 800*600 and lower; divb appears
underneath diva.

600px + 220px > 800px.

See http://www.w3.org/TR/REC-CSS2/visuren.html#floats

"A left-floating box that has another left-floating box to its left may
not have its right outer edge to the right of its containing block's
right edge. (Loosely: a left float may not stick out at the right edge,
unless it is already as far to the left as possible.) An analogous rule
holds for right-floating elements."

Is it possible that diva and divb are always next to each other; and if the
resolution is too low then create a horizontal scrollbar?

If diva and divb must be of fixed width (as against in the equivalent
width ratio) place diva and divb in a containing div of width >= 820px

Louise