Question

CSS – How to make side by side not wrap when user make browser size changing?
http://jsfiddle.net/QWSHw/

<div class="a">
<div class="gridrow">
    <div class="griditem">a
    </div>
    <div class="griditem">b
    </div>
</div>

 .a{
background: black;
position: absolute;
top:10px;
width:100%;
}
.gridrow{
background: gray;
width:100%;
}
.griditem{
background: blue;
float:left;
width:300px;
height:300px;
}​

Answer 1

Since you’re using float: left, the only thing you can do is set a min-width rule for the .gridrow

.gridrow{
    background: gray;
    width:100%;
    min-width: 600px;
}

Of course this impose a min screen size of 600px, if the user resize the browser window to less than 600px then the horizontal scroll bar will show up.