CODEWITHSUNDEEP
htmlcssscroll
Sieryuu
Sieryuu

Reputation: 1521

Overflow-x does not work

This is my code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  <style type="text/css">
    .bigbox {
      width:1024px;
      height:600px;
      background-color:#000000;
      overflow-x:auto;
      overflow-y:hidden;
    }
    .box{
      width:500px;
      height:500px;
      float:left;
      background-color:#AAAAAA;
      margin:5px;
    }
  </style>
  </head>
  <body>
    <div class="bigbox">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

How can I make all box display horizontally?

And the bigbox has a scroll bar with the width fixed.

I have tried to change the width to 5000px, and it work, but the width is over the boxes

Upvotes: 1

Views: 5363

Answers (3)

Priyank Patel
Priyank Patel

Reputation: 6996

Make your .box div display:inline-block;

.bigbox {
      width:400px;
      height:600px;
      background-color:#000000;
      overflow-x:auto;
      overflow-y:hidden;
      white-space:nowrap;
    }
    .box{
      width:100px;
      height:100px;
      float:left;
      background-color:#AAAAAA;
      margin:5px;
    display:inline-block;
    }​

Edited Demo

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Demo -- Jsfiddle Demo

HI now add some properties

as like this

    .bigbox {
    white-space:nowrap;
    }
    .box{
    float:left;  // remove this line 
    display:inline-block;
    vertical-align:top;
    }

Live demo

Upvotes: 6

iMoses
iMoses

Reputation: 4348

Best and easiest way (as far as I know) is to wrap all .box elements and define their parent width as the sum of all his children's width.

In your code example it would be:

CSS:

.boxview {
    width: 3060px;
}

HTML:

<div class="bigbox">
  <div class="boxview">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

If the number of boxes is not prefixed then I suggest you use JavaScript to set .boxview width dynamically.

Also notice overflow-x will not work on older browsers (IE9+ only).

You might wanna add overflow: auto before defining overflow-x and overflow-y as a fallback.

Code example: http://jsfiddle.net/zvs4H/1/

Upvotes: -1

Related Questions