Why aren't these divs aligned horizontally? Why do they break?

Question

This HTML:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> <div style="border:1px solid red; height:50px; width:80px;"></div> <div style="border:1px solid red; height:50px; width:80px;"></div> <div style="border:1px solid red; height:50px; width:80px;"></div> <div style="border:1px solid red; height:50px; width:80px;"></div> </div> 

Why aren't the red divs in the same horizontal row and how can I get them on the same row?

Answer 1

Ok, so divs are block elements, and sometimes I use divs to place menus. So you can add a style property called display: inline-block to the inner divs, and if you want these divs to be centered inside the container div, you can use text-align: center . It will work on all types of blocks.

 <div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> </div> 

Answer 2

Here you are looking for:

 <style type="text/css"> div.littleDiv { display: inline-block; border:1px solid red; height:50px; width:80px; } </style> <div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> <div class="littleDiv"></div> <div class="littleDiv"></div> <div class="littleDiv"></div> <div class="littleDiv"></div> </div> 

This is possible for a long time using float, but now with the built-in block it is even easier. elements of an inline block are similar to inline elements, but they can have a width and a height.

However, you can use float: lefts instead of display: inline-block;

From MDN

The CSS float property indicates that the element should be taken from the normal stream and placed along the left or right side of its container, where text and inline elements will flow around it. A floating element is one where the calculated float value is not equal.

Answer 3

This is the default behavior of the div and all other block elements. To change it, you must either set display to inline-block , or float to left or right . (Setting float: left; will justify the elements on the left side of their container, and float: right; will justify them on the right side.) I would recommend practicing with inline-block . This is usually the best solution, because it leaves elements in the normal flow of the document, and does not remove them from interacting with neighboring elements, as the float does.

Answer 4

Div elements are block style elements, by default. to make it in horizontal lvl make the style display attribute an inline block or put them left or right:

 <div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> </div> 

OR

  <div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> </div> 

Answer 5

This trick, other answers lacked this detail text-align: center ;.

Thanks guys!

 <div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> </div>