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

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