html - How to avoid wrapping in CSS float

Question

I have a page with 2 columns side by side (defined both by float: left).

My problem is, when I scale the browser to be smaller, the right column will be dropped below the left column.

how can I avoid this? and still to make them be side-by-side no matter the screen size.

Thank you

Answer 1

Alternatively if you want them to resize with the browser will need to define the width in percentages. So:

.div1 {
float:left;
width:49%;
background:red;
}

.div2 {
float:left;
width:49%;
background:orange;
}

Some people would use 50% here, I tend not to