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  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  amp  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

User · Answer

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

User · Answer

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   lt div id  container  gt  x000D     lt div id  inner  gt  x000D       lt div class  child  gt  lt  div gt  x000D       lt div class  child  gt  lt  div gt  x000D       lt div class  child  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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   lt div id  foo  gt  x000D     lt div class  bar  gt  lt  div gt  x000D     lt div class  bar  gt  lt  div gt  x000D     lt div class  bar  gt  lt  div gt  x000D     lt div class  bar  gt  lt  div gt  x000D     lt div class  bar  gt  lt  div gt  x000D     lt div class  bar  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   lt div id  container  gt  x000D     lt div id  inner  gt  x000D       lt div class  child  gt  lt  div gt  x000D       lt div class  child  gt  lt  div gt  x000D       lt div class  child  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[html] CSS - Make divs align horizontally

Examples related to html

Examples related to css

Examples related to alignment