CODEWITHSUNDEEP
htmlcss
bc5803
bc5803

Reputation: 29

How to prevent div from wrapping?

I've actually seen and researched a lot before attempting to ask. So im using the 960 css framework where they provide me the divs to layout my website.

the html is here....

<div id="header">  
<div class="container_12">
    <div class="grid_5">
            EMPTY
    </div>
    <div class=" nav grid_7">
            EMPTY
    </div>
</div>
</div>

The two div elements sit next to each other nicely on full size screen but when I resize it the div element to the right of the screen wraps underneath it. I've been told to use the display inline block and whitespace no wrap but I don't know how to get about it nor do I know what it means.

Will someone be kind enough to explain it thoroughly for me? Thank you!

Upvotes: 1

Views: 70

Answers (2)

Tim S
Tim S

Reputation: 2329

The 960 grid system is not responsive and assumes a minimum container width of 960 pixels. So all you really need to do is add this to your CSS:

.container_12 { min-width: 960px; }

If you want a responsive grid system, I suggest you familiarize yourself with Bootstrap.

Upvotes: 1

k2snowman69
k2snowman69

Reputation: 1929

Maybe something using Flexbox... Note with this you can also have the two divs take up the same amount of column space if you wish by setting the flex of grid_5 to "1 1 auto".

.container_12 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Note that this is actually the default value... just putting here for educational purposes */
}
.grid_5 {
  flex: 0 0 auto;
  }
.grid_7 {
  flex: 1 1 auto;
  }
<div id="header">  
<div class="container_12">
    <div class="grid_5">
            EMPTY
    </div>
    <div class=" nav grid_7">
            EMPTY
    </div>
</div>
</div>

Upvotes: 0

Related Questions