CODEWITHSUNDEEP
htmlcss
Tiele Declercq
Tiele Declercq

Reputation: 2170

Stretch container DIV over window width

I'm working on a page that can hold very big content. It could easily grow to (and over) 10.000px in width. I simply want my page to stretch along.

This should be very simple, and I can fix it with display: table-cell, but it doesn't 'smell' as the right answer. It feels like a hack. I think I'm missing something crucial.

Fiddle

CSS:

#container { white-space: nowrap; padding: 50px; background-color: green; }
#container > div { display: inline-block; width: 200px; height: 200px; } 
#container > div:nth-child(2n+1) { background-color: red; }
body { background-color: #ccc; }

HTML:

<div id="container">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Why isn't the container div stretching to its content? BODY is correctly stretched, so how do I force my container div to take the width of its parent or children?

Upvotes: 0

Views: 362

Answers (4)

Friedrich
Friedrich

Reputation: 2300

add the line overflow-x: scroll; to your container-css

here is a jsfiddle as well

Upvotes: 0

Kisspa
Kisspa

Reputation: 584

#container {
  background-color: green;
  white-space: nowrap;
  padding: 50px;
  width: auto;
  display:table;
 }
  #container > div {
    display: inline-block;
    width: 200px;
    height: 200px;
    display:table-cell;
    }

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10906

try something like this

#container {
    background-color: #008000;
    display: table;
    padding: 50px;
    white-space: nowrap;
}

EDITED

    #container {
        background-color: #008000;
        display: inline-block;
        padding: 50px;
        white-space: nowrap;
    }

DEMO

Upvotes: 1

misterManSam
misterManSam

Reputation: 24712

Add overflow-x: scroll; to #container. Is that what you want?

Edit: changed to overflow-x :)

CSS

 #container {
        background-color: green;
        white-space: nowrap;
        padding: 50px;
        width: auto;
        overflow-x: scroll;
 }

Upvotes: 1

Related Questions