CODEWITHSUNDEEP
htmlcss
user1575921
user1575921

Reputation:

CSS - How to make <div> side by side not wrap when user make browser size changing?

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;
}​

Upvotes: 1

Views: 794

Answers (3)

Marcelo De Zen
Marcelo De Zen

Reputation: 9497

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.

Upvotes: 3

danikoren
danikoren

Reputation: 4301

I'm not sure what exactly you are trying to accomplish, but i can guess you are talking about responsive, or adaptive design.

you need to set your width value in '%' instead of 'px', that will cause the browser to calculate the width on each viewport change and adjust accordingly

i recommend you use a css framework:

twitter bootstrap

foundation3

Upvotes: 0

Mackey18
Mackey18

Reputation: 2352

Set a min-width: on your containing Div. This will stop it from decreasing in size to the extent that your content wraps around.

Upvotes: 0

Related Questions