How To Avoid Wrapping In Css Float

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 colu

Solution 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

Solution 2:

Make the parent container a fixed width or set the overflow to auto. For example if your two columns are 200px wide

<divstyle="width: 400px; overflow: auto;"><divstyle="float: left; width: 200px;"></div><divstyle="float: left; width: 200px;"></div></div>