Shawn Bourque Shawn Bourque - 24 days ago 8
CSS Question

Divs wrap when a browser window is scaled down in size

This is probably the first time I've tried asking a question regarding CSS or HTML online but as the title states I'm having an issue with div's collapsing underneath each other when a browser window is reduced in size (a browser window that's not full screen).

The div's are setup as a 3 div's in side a div that wraps around the 3 that are meant to lay out horizontally across the screen. I would like the browser to display a horizontal scroll bar if the window is no longer large enough to display all content horizontally rather then have the windows collapse like they are now.

Below is exactly what I've put for the div's that are causing me so much frustration at the moment.

.wrap {
height:auto;
width:100%;
margin:10px 0 0 0;
overflow:hidden;
}

.box1 {
height:320px;
width: 240px;
border: 1px solid #777;
margin: 0 0 0 10px;
display: inline-block;
float:left;
}

.box2 {
height:320px;
width:62%;
margin: 0 -3px 0 1px;
border: 1px solid #777;
display:inline-block;
}

.box3 {
height:320px;
width: 240px;
border: 1px solid #777;
display: inline-block;
}

Answer

Floats... float, often in unexpected or undesirable ways. Use inline-block layout instead, and use a fixed width on your wrapper.

.wrapper {width: 960px;}
.box {width: 240px; display: inline-block;}
.box:nth-child(2) {width: 480px;}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
Comments