I have a parent div containing 6 child divs. The height of the internal divs changes dynamically based on the data. The outer div has a fixed height set. I want the internal divs to move to a new column inside the parent div when they no longer fit in terms of height.
Here is a brief snippet illustrating my situation:
#outer {
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
} <div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>And here is how I would like it to be displayed:
#outer {
float:left;
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
} <div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
<div id="outer">
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>Any suggestions are welcome!
Thank you