Is there a way to neatly organize the divs on a page, depending on available space? I want them to align horizontally if there is enough room before moving to the next line. The tab-content parent div may contain several divs. Any suggestions on how this can be achieved? Here is the code snippet with HTML and CSS:
The HTML structure is as follows:
<div class="tab-content" id="tabs4">
<div id="total_mem" class="all"> </div>
<div id="total_cpu" class="all"> </div>
<div id="total_disk" class="all"> </div>
<div id="total_read" class="all"> </div>
<div id="total_io" class="all"> </div>
The CSS for the outer div is as follows:
.tab-content {
width: 1400px;
border: solid 1px #aaa;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
text-align: center;
}