CODEWITHSUNDEEP
htmlcssline-breaks
Thomas Sparber
Thomas Sparber

Reputation: 2917

Multiple fixed size div's auto line break

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?

Upvotes: 4

Views: 1430

Answers (3)

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

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

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo

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

Upvotes: 1

CreativePS
CreativePS

Reputation: 1093

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>

Upvotes: 4

Related Questions