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

Solution 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>

Solution 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

Comments

[Himberjack]

Thanks. can't I make the parent to be auto width?

[cbednarski]

+1 for 49%. Good protection against stray pixels. Note that percentages and fixed measurements (i.e. margins, padding, borders) don't play well together.

[Ben Rowe]

unless you specify the width, the default of block elements is to automatically adjust the width according to the available space. You could use javascript to calculate the width after loading the page.

[cbednarski]

@oshafran Because floats are weird. stackoverflow.com/questions/3480086/…

[Stuart Burrows]

You could set the wrapper width to 100% and overflow:auto. This should cause the wrapper to resize with the browser and cause a scrollbar to appear. Untested

[Ben Rowe]

@Inrbob true, may cause other problems however.

[Andrew Bullock]

If you have "stray pixels", you're doing something seriously wrong.

[Dom Ramirez]

I agree with Andrew. If you need a fluid width, you just need to make it all fluid width OR add compensation for fixed-width properties via negative margins. All in all, hoping that 49% will do it strikes me as bad practice, especially since that percentage might not be quite enough for all resolutions. Best to be fully explicit in styling that could potentially cause problems. Of course, I'm the kind of guy that always resets margins/padding/border to 0 and it does cause some overhead work. Maybe exact measurements aren't necessary for every single use case.

[Iain Collins]

It should be 50%, if padding is throwing you off either use negative margins or (better) change the box-sizing model.

[Stuart Burrows]

This answer is from 2010 - 'stray pixels' were created by some poor browser rounding issues. To my knowledge these have all been resolved so - for those now implementing this - yes, use 50%