Question

I’m building a header for a website that includes skylines from various cities. To make it easy to change what cities are shown, I have designed a unique div for each city, that I can just drop in to the header. I set the background image for each div, and then just position them one after another, like this.

<header>
  <div class='skyline'>
    <div id='la'></div>
    <div id='seattle'></div>
    <div id='paris'></div>
    <div id='chicago'></div>
    <div id='london'></div>
  </div>
</header>

The problem I’m having is that the last one will be removed from the page, leaving a blank space at the right edge. I want them to flow past the edge of the screen, so that the user just sees whatever can fit in their window width. My css looks like this:

.skyline {
  background: #fff;
  background-position: 0px 0px;
  overflow: hidden;
  height: 113px;
  width: 100%;
}
.skyline div {
  display: inline-block;
  height: 113px;
  float: left;
  overflow: visible;
}
.skyline #la {
  width: 320px;
  background-image: url('/img/skyline/la.png');
}

All the other divs have the same css, just different source image and width.

I put this (modified) on jsfiddle to demonstrate the behavior that I’m getting. Just resizing the window demonstrates what is happening.

What can I do to fix this? I am open to changing the html structure a bit, but if it’s possible to keep it the same, I would greatly appreciate that.

Answer 1

You have to set the containing element to overflow: hidden; to make it not display the horizontal scrollbar and you HAVE to specify the total width of the container for those floated divs so that they go all the way to the right. Otherwise they get pushed down. You could use position absolute to counter that but I think this solution is simpler.

Like this http://jsfiddle.net/xLwML/17/