CSS - Make divs horizontally aligned

Question

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

I want a horizontal line float: left divs inside this container. Divs that float to the left will naturally be pushed to the “line” below, after they read the correct border of their parent. This will happen even if the height of the parent should not allow this. Here's what it looks like:

! [False] [1] - image of the deleted image that has been replaced by the ad

How I would like:

! [Right] [2] - image of the deleted image that has been replaced by the ad

Note. The effect I want can be achieved with inline elements and white space: no-wrap (this is how I did it in the image shown). This, however, is not good for me (for reasons too long to explain here), since child divs should be placed on block level elements.

Answer 1

You can put the inner div in a container that is wide enough to hold all floating 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> 

Answer 2

style="overflow:hidden" for parent div and style="float: left" for all child divs it is important to make the alignment of divs horizontal for older browsers such as IE7 and below.

For modern browsers, you can use style="display: table-cell" for the entire child divs , and it will be displayed horizontally.

Answer 3

This is similar 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> 

Answer 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 for clip work.

Answer 5

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

It is important to note that the container should not be wrapped if items MUST be displayed horizontally: white-space: nowrap

Answer 6

Now you can use css flexbox to align divs horizontally and vertically if you need to. the general formula is as follows

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

Answer 7

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