I want the div
s to:
- Wrap their content.
- Stay in their originally associated line, essentially without wrapping.
Basically, the tables are stacking below each other, when they can't stay on screen. I would rather they become hidden off screen.
I've tried adding overflow: hidden;
to the main layout style. I do not want to fix a width for each div
. It needs to fit content in.
.layout {
-moz-border-radius: 15px;
border-radius: 15px;
vertical-align: top;
display: inline-block;
}
.layoutbacking {
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
margin: 5px;
background: #CCCCCC;
}
<div class="layout" style="background: #222222; width: 100%">
<div>
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
<div class="layout">
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
<br />
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
</div>
</div>
<div>
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>