HTML CSS scroll horizontal

Question

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>

What exactly doesn't work about it? Can you make an example on JSFiddle to show us? — Jake Bathman
– Jake Bathman, Commented Oct 2, 2015 at 13:15
The #latest doesn't list the article with a scroll horizontaly — sfsefsf33fs3fs3fs
– sfsefsf33fs3fs3fs, Commented Oct 2, 2015 at 13:18

Andy Furniss · Accepted Answer · 2015-10-02 13:22:21Z

3

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/

answered Oct 2, 2015 at 13:22

Andy Furniss

3,9247 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivin Raj · Accepted Answer · 2015-10-02 13:31:13Z

0

#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>

answered Oct 2, 2015 at 13:31

Ivin Raj

3,4312 gold badges34 silver badges70 bronze badges

Comments

ch3t · Accepted Answer · 2015-10-02 13:33:24Z

0

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;

}

answered Oct 2, 2015 at 13:33

ch3t

4965 silver badges15 bronze badges

Comments

Luca Detomi · Accepted Answer · 2015-10-09 08:41:02Z

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;
}

Collectives™ on Stack Overflow

HTML CSS scroll horizontal

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related