CODEWITHSUNDEEP
htmlcss
Anees Haider
Anees Haider

Reputation: 239

avoiding div(s) wraps

I am trying to create a div parent container having fixed width (say width: 300px), which contains divs (say width: 80px). But when the container get 4 divs (i.e. 80*4=320px > 300px), it wraps the forth div. I want that there would be no wrapping of divs, instead we can perform horizontal scrolling, so that container width remain 300px, and if divs get out of vision, we may horizontally scroll to see all divs.

<html>
<body>
  <div id="parent" style="width:300px;overflow:scroll;">
    <div class="child" style="width:80px; float:left;">lorem</div>
    <div class="child" style="width:80px; float:left;">ipsum</div>
    <div class="child" style="width:80px; float:left;">dolore</div>
    <div class="child" style="width:80px; float:left;">lorem</div>
  </div>
</body>
</html>

Upvotes: 1

Views: 606

Answers (3)

Ivan Ivanic
Ivan Ivanic

Reputation: 3054

.child {
   display: inline-block;
}

#parent {
   white-space: nowrap;
}

Here is example: http://jsfiddle.net/qnpGm/

UPDATE: in ie6/ie7 this will work only on elements with a natural display: inline. Thanks for comments :)

Upvotes: 3

PenthousePauper
PenthousePauper

Reputation: 723

Hence "inline-block" will come up with problems regarding crossbrowser-compactibility (IE 6), I guess this isn't possible without a bit of extra markup.

So let's assume "parent" is your viewport. Then you'll need a container, wrapped around the "child"-elements, having the same width as all of them - in your case 320px. You can calculate the with using either server-side languages or javascript.

<html>
<body>
  <div id="parent" style="width:300px;overflow:scroll;">
    <div id="view" style="width:320px;">
        <div class="child" style="width:80px; float:left;">lorem</div>
        <div class="child" style="width:80px; float:left;">ipsum</div>
        <div class="child" style="width:80px; float:left;">dolore</div>
        <div class="child" style="width:80px; float:left;">lorem</div>
    </div>
  </div>
</body>
</html>

Upvotes: 0

andyface
andyface

Reputation: 946

try adding white-space:nowrap; to your #parent style. Haven't tested this on your code, but I've used this in similar situations where I've needed to expand a div containing a number of child divs without setting a width for the parent.

Upvotes: 0

Related Questions