CODEWITHSUNDEEP
htmlcss
sfsefsf33fs3fs3fs
sfsefsf33fs3fs3fs

Reputation: 653

HTML CSS scroll horizontal

I want to make a scroll horizontal when there's to many of article , not make them jump down. So I want it to be able to scroll so you can see the rest. but it doesn't work.

Snippet:

#latest {
  background: #eee;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 150px
}
article {
  width: 250px;
  height: 150px;
  background: #ccc;
  margin-right: 30px;
  float: left
}
<div id="latest">
  <div id="wrapper">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </div>
</div>

Upvotes: 2

Views: 137

Answers (4)

Luca Detomi
Luca Detomi

Reputation: 5716

Taking inspiration from @Andy Fumiss' answer, I integrated it some improvement:

display:inline-block has a little drawback because empty spaces due to code indentation has effect like space characters.

To show this effect, I slightly edit his example reducing margin-right separation to only 5px and avoiding indentantion in html code of first two article tags.

As you can see, first margin is lesser than following, because from second one, there is 5px + empty space.

To avoid this undesired behaviour, you can set font-size:0 on container and then restore its original value on content, like in this updated example

Here, relevant portion of changed code:

HTML:

<div id="latest">
    <div id="wrapper">
        <article></article><article></article>
        <article></article>
        ...
    </div>
</div>

CSS:

#wrapper {
    ...
    font-size:0;
}

article {
    ...
    font-size:13px;
}

Upvotes: 0

ch3t
ch3t

Reputation: 496

You can use display:inline-block with white-space:nowrap

#latest {
 overflow-x: scroll;
 overflow-y: hidden;
 height: 80px;
 white-space:nowrap
}
article{
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 150px;
cursor: pointer;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;

}

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

#latest{
background: #eee;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
overflow-x: scroll;
overflow-y: hidden;
height: 150px
}

#wrapper {
white-space:nowrap;
}

article{
width: 250px;
height: 150px;
background: #ccc;
margin-right: 30px;
display: inline-block;
}
<div id="latest">
  <div id="wrapper">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </div>
</div>

Upvotes: 0

Andy Furniss
Andy Furniss

Reputation: 3914

Make your articles display:inline-block instead of float:left and set wrapper to be white-space:nowrap like so:

http://jsfiddle.net/andyfurniss/tobrbf7q/

Upvotes: 3

Related Questions