CSS - Make divs align horizontally

Question

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.

Your image links seem to have broken. If you still have the originals, please reupload them to stack.imgur. Thanks! — Ilmari Karonen, Jul 27 '15 at 08:18

score 106 · Accepted Answer · edited Dec 03 '16 at 18:35

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>

edited Dec 03 '16 at 18:35

Nhan

3,595
6
30
38

answered Aug 31 '08 at 21:29

LucaM

2,856
1
19
11

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 '14 at 03: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 '17 at 22:22

score 34 · Answer 2 · edited Aug 03 '14 at 22:03

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.

edited Aug 03 '14 at 22:03

E-Riddie

14,660
7
52
74

answered Apr 13 '11 at 11:17

Kwex

3,992
1
35
28

score 13 · Answer 3 · edited Aug 24 '20 at 02:25

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

edited Aug 24 '20 at 02:25

Joundill

6,828
12
36
50

answered Jul 17 '16 at 10:58

sriram hegde

2,301
5
29
43

elegant solution. – zawhtut Oct 15 '20 at 07:40

score 6 · Answer 4 · edited Dec 03 '16 at 18:36

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>

edited Dec 03 '16 at 18:36

Nhan

3,595
6
30
38

answered Aug 31 '08 at 21:24

Sören Kuklau

19,454
7
52
86

score 4 · Answer 5 · edited Jan 14 '16 at 19:15

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.

edited Jan 14 '16 at 19:15

thanksd

54,176
22
157
150

answered Aug 31 '08 at 21:28

fcurella

2,461
2
19
7

4

what is clip's browser support? – alex Oct 28 '08 at 06:27
1

From http://www.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 '12 at 17:56

score 3 · Answer 6 · answered Aug 28 '15 at 17:57

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

score -1 · Answer 7 · answered Jul 30 '12 at 07:57

-1

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

answered Jul 30 '12 at 07:57

Wolfpack'08

3,982
11
46
78

CSS - Make divs align horizontally

7 Answers7

Linked

Related