Why are these divs not horizontally aligned? Why do they line 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 are the red divs not in the same horizontal row and how do I get them in the same row?

Answer 1

Here's what you 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 has been possible for a long time using float, but now with inline-block it's even easier. inline-block elements are like inline elements but they can have a width and height.

However you might want to use float: lefts instead of display: inline-block;

From MDN

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