89

I have a container div with a fixed width and height, with overflow: hidden.

I want a horizontal row of float: left divs within this container. Divs which are floated left will naturally push onto the 'line' below after they read the right bound of their parent. This will happen even if the height of the parent should not allow this. This is how this looks:

Wrong

How I would like it to look:

![Right][2] - removed image shack image that had been replaced by an advert

Note: the effect I want can be achieved by using inline elements & white-space: no-wrap (that is how I did it in the image shown). This, however, is no good to me (for reasons too lengthy to explain here), as the child divs need to be floated block level elements.

1
  • 10
    Your image links seem to have broken. If you still have the originals, please reupload them to stack.imgur. Thanks! Jul 27, 2015 at 8:18

7 Answers 7

106

You may put an inner div in the container that is enough wide to hold all the floated divs.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}
<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

2
  • how can I then make the outter div center? I tried add align="center" on the outter div, seems doesn't work.
    – hakunami
    Feb 27, 2014 at 3:39
  • 1
    This works for percentage widths too. In my case I'm using a container div with width: 200%; and the child elements are each width: 50%;. I can then use transform: translateX(n%); on the container to emulate a carousel effect as long as I have a parent container with overflow: hidden;
    – evolross
    Oct 24, 2017 at 22:22
34

style="overflow:hidden" for parent div and style="float: left" for all the child divs are important to make the divs align horizontally for old browsers like IE7 and below.

For modern browsers, you can use style="display: table-cell" for all the child divs and it would render horizontally properly.

13

You can now use css flexbox to align divs horizontally and vertically if you need to. general formula goes like this

parent-div {
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;
}

child-div {
  width: /* yoursize for each div */
  ;
}
1
  • elegant solution.
    – zawhtut
    Oct 15, 2020 at 7:40
6

This seems close to what you want:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}
<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

4

you can use the clip property:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

note the position: absolute and overflow: hidden needed in order to get clip to work.

2
  • 4
    what is clip's browser support?
    – alex
    Oct 28, 2008 at 6:27
  • 1
    From w3schools.com/cssref/pr_pos_clip.asp: The clip property is supported in all major browsers. Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
    – dsomnus
    Aug 16, 2012 at 17:56
3

Float: left, display: inline-block will both fail to align the elements horizontally if they exceed the width of the container.

It's important to note that the container should not wrap if the elements MUST display horizontally: white-space: nowrap

-1

Float them left. In Chrome, at least, you don't need to have a wrapper, id="container", in LucaM's example.

Not the answer you're looking for? Browse other questions tagged or ask your own question.