I've been searching for answers to my questions for hours now, but haven't found a satisfactory solution yet. Can anyone help me out?
Here is the link to my jsfiddle: http://jsfiddle.net/foreyez/Mr2ER/
This is the simple markup I am working with:
<div class='container'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
Along with the following CSS:
.container {
white-space:nowrap;
}
.box1 {
width:200px;
height:200px;
background:red;
float:left;
}
.box2 {
width:200px;
height:200px;
background:green;
float:left;
}
.box3 {
width:200px;
height:200px;
background:blue;
float:left;
}
Despite using float:left in the CSS, the boxes wrap when the window size decreases. Any advice on how to prevent this wrapping without using inline-block solutions?