CSS - Make divs align horizontally

85

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][1] - removed image shack image that had been replaced by an advert

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.

This question is tagged with html css alignment

~ Asked on 2008-08-31 21:05:41

8 Answers


100

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

_x000D_
_x000D_
#container {_x000D_
  background-color: red;_x000D_
  overflow: hidden;_x000D_
  width: 200px;_x000D_
}_x000D_
_x000D_
#inner {_x000D_
  overflow: hidden;_x000D_
  width: 2000px;_x000D_
}_x000D_
_x000D_
.child {_x000D_
  float: left;_x000D_
  background-color: blue;_x000D_
  width: 50px;_x000D_
  height: 50px;_x000D_
}
_x000D_
<div id="container">_x000D_
  <div id="inner">_x000D_
    <div class="child"></div>_x000D_
    <div class="child"></div>_x000D_
    <div class="child"></div>_x000D_
  </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

~ Answered on 2008-08-31 21:29:59


31

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.

~ Answered on 2011-04-13 11:17:50


6

This seems close to what you want:

_x000D_
_x000D_
#foo {_x000D_
  background: red;_x000D_
  max-height: 100px;_x000D_
  overflow-y: hidden;_x000D_
}_x000D_
_x000D_
.bar {_x000D_
  background: blue;_x000D_
  width: 100px;_x000D_
  height: 100px;_x000D_
  float: left;_x000D_
  margin: 1em;_x000D_
}
_x000D_
<div id="foo">_x000D_
  <div class="bar"></div>_x000D_
  <div class="bar"></div>_x000D_
  <div class="bar"></div>_x000D_
  <div class="bar"></div>_x000D_
  <div class="bar"></div>_x000D_
  <div class="bar"></div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

~ Answered on 2008-08-31 21:24:05


5

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

~ Answered on 2016-07-17 10:58:04


5

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.

~ Answered on 2008-08-31 21:28:31


4

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

~ Answered on 2015-08-28 17:57:15


1

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

~ Answered on 2012-07-30 07:57:55


0

You can do something like this:

_x000D_
_x000D_
#container {_x000D_
  background-color: red;_x000D_
  width: 200px;_x000D_
}_x000D_
_x000D_
.child {_x000D_
  background-color: blue;_x000D_
  width: 150px;_x000D_
  height: 50px;_x000D_
}
_x000D_
<div id="container">_x000D_
  <div id="inner">_x000D_
    <div class="child"></div>_x000D_
    <div class="child"></div>_x000D_
    <div class="child"></div>_x000D_
  </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

~ Answered on 2020-04-19 06:57:58


Most Viewed Questions: