How to avoid wrapping in CSS float

Question

Hi

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

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>

Answer 2

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