Multiple fixed size div's auto line break - html

Question

My Goal is to have a DIV that contains other fixed sized DIVs. Those DIVs should contain a line break (only) if necessary. So it should look like the following:
No line breaks necessary:
_______________________________
| ____ ____ ____ |
| |__| |__| |__| |
| |
| |
|_____________________________|
Line break necessary:
_______________________________
| ____ ____ ____ ____ |
| |__| |__| |__| |__| |
| ____ |
| |__| ... |
|_____________________________|
Currently, the best I could come up is the following:
<div id="outer">
<div>
<p>Some text</p>
</div>
...
</div>
<style>
#outer {
overflow: auto;
}
#outer div {
display: inline;
border: 1px solid black;
}
#outer div p {
width: 60px;
height: 60px;
Display: inline-block;
}
</style>
Does anybody have an idea on how to achieve this?

Answer 1

Hope this will help you and resolve your query, let me know any issues
#thomas
#outer {
overflow: auto;
border:1px solid #ff0000;
padding:10px;
}
#outer div {
display: inline-block;
border: 1px solid black;
margin:0px 1% 2% 1%;
}
#outer div p {
width: 60px;
height: 60px;
margin:0px;
display: inline-block;
}
<div id="outer">
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
...
</div>

Answer 2

Try like this: Demo
#outer div {
display: inline-block; / Use inline-block */
border: 1px solid black;
}
#outer div p {
width: 60px;
height: 60px;
}

Answer 3

here your code is working fine i have tried to change the display inline-block to the div to make the block in a row
#outer {
overflow: auto;
}
#outer div {
display: inline-block;
padding: 5px;
border: 1px solid #808080;
text-align: center;
line-height: 32px;
margin: 15px;
}
#outer div p {
width: 60px;
height: 60px;
}
<div id="outer">
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
</div>
and here is the demo working code for this
Demo code