How to display a horizontally scrolling list next to a fixed item?

Question

I am trying to display a list of images (equal height) in a horizontally scrolling div. This much works, but when I want to have a fixed image - a "cover" image present leftmost inside container the layout gets screwed up.

Below is the CSS and HTML of my work. If you run the snippet you can see that the list jumps to next line, instead of staying adjacent to "cover" image and scrolling horizantally. Here is the jsfiddle - http://jsfiddle.net/6x66dLdy/

I can solve it using javascript by setting width of #list programmatically, but I want to do it with CSS alone if possible.

#container {
  height: 120px;
  background: #ccccff;
}

#cover {
  height: 100px;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

#cover img {
  border: 2px solid #cc0000;
}

#list {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 100px;
  margin: 10px 0;
  display: inline-block;
}

.item {
  height: 80px;
  margin: 10px 5px;
  display: inline-block;
}

<div id="container">
    <div id="cover">
        <img src="http://placehold.it/160x100"/>
    </div>
    <div id="list">
        <div class="item">
            <img src="http://placehold.it/120x80"/>
        </div>
        <div class="item">
            <img src="http://placehold.it/60x80"/>
        </div>
        <div class="item">
            <img src="http://placehold.it/120x80"/>
        </div>
        <div class="item">
            <img src="http://placehold.it/120x80"/>
        </div>
        <div class="item">
            <img src="http://placehold.it/120x80"/>
        </div>
    </div>
</div>

You have to provide widths for both of your divs and the container. Something like this: jsfiddle.net/abhitalks/6x66dLdy/1 — Abhitalks
– Abhitalks, Commented Nov 21, 2014 at 12:18
@abhitalks: Thanks! please add calc as your answer. This is what I was roughly looking for. — Vinayak Garg
– Vinayak Garg, Commented Nov 21, 2014 at 12:33

Abhitalks · Accepted Answer · 2014-11-21 12:38:06Z

1

This happening because you don't have widths specified. You have to provide widths for both of your inner divs and also to the container. Giving explicit width to container is advisable because you can then safely assign percent widths to children.

In you use-case, you have to calculate how much width is safer for your div#cover and then use the CSS calc to calculate the remainder of the width to assign to the list. Also, remember to account for the margins you have.

Relevant CSS:

width: calc(100% - 240px);

Your fiddle: http://jsfiddle.net/abhitalks/6x66dLdy/1

It is always better to specify a proper box-sizing. So include this at the top of your CSS:

* { box-sizing: border-box; }

.

answered Nov 21, 2014 at 12:38

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

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

2 Comments

Vinayak Garg Over a year ago

Can you tell me why * { box-sizing: border-box; } is useful in this context? Also for others: if you are writing less instead of css, use width: ~"calc(100% - 240px)"; instead.

Abhitalks Over a year ago

This is to ensure cross-browser consistency on box model. border-box will ensure that widths are calculated with taking content, padding and border size into account. So you only have to worry about margins and nothing else. More info here: developer.mozilla.org/en-US/docs/Web/CSS/…

Blake Simpson · Accepted Answer · 2014-11-21 12:32:55Z

1

Float the #cover left and remove the display: inline-block from #list.

This will allow the cover image and images in the list be any unknown width. Setting a fixed width on the containers like the other answers would not allow this.

Fiddle: http://jsfiddle.net/6x66dLdy/4/

#container {
  height: 120px;
  background: #ccccff;
}

#cover {
  height: 100px;
  margin: 10px;
  float: left;
  vertical-align: top;
  position: relative;
}

#cover img {
  border: 2px solid #cc0000;
}

#list {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 100px;
  margin: 10px 0;
}

.item {
  height: 80px;
  margin: 10px 5px;
  display: inline-block;
}

answered Nov 21, 2014 at 12:32

Blake Simpson

1,0886 silver badges10 bronze badges

Comments

ashkufaraz · Accepted Answer · 2014-11-21 12:27:36Z

0

test this

http://jsfiddle.net/6x66dLdy/3/

#container {
  height: 120px;
  background: #ccccff;
    width:1000px;
}

#cover {
  height: 100px;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
    width:200px;
    float:left;
}

#cover img {
  border: 2px solid #cc0000;
}

#list {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 100px;
  margin: 10px 0;
  width:600px;
    float:left
}

.item {
  height: 80px;
  margin: 10px 5px;
  display: inline-block;
}

answered Nov 21, 2014 at 12:27

ashkufaraz

5,2997 gold badges54 silver badges85 bronze badges

1 Comment

Vinayak Garg Over a year ago

I can't fix #list width. It won't work for different screen sizes.

Sirmais · Accepted Answer · 2014-11-21 12:59:34Z

0

To answer your question you can specify min-width:800px; for the id #container so it does not jump down and stay beside the main picture
here is an example http://jsfiddle.net/6x66dLdy/5/

edited Nov 21, 2014 at 12:59

answered Nov 21, 2014 at 12:33

Sirmais

12813 bronze badges

Collectives™ on Stack Overflow

How to display a horizontally scrolling list next to a fixed item?

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related