CODEWITHSUNDEEP
htmlcss
Shawn Bourque
Shawn Bourque

Reputation: 3

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

Upvotes: 0

Views: 3252

Answers (2)

isherwood
isherwood

Reputation: 61073

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>

Upvotes: 1

Paul Radich
Paul Radich

Reputation: 715

Having it at 100% will cause the floats to drop bellow each other.

Set a .wrap to a set width if you want a horizontal scroll bar

Upvotes: 0

Related Questions