Menu
jsFiddle demo
I want the divs to:
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>
274
We apply the white-space: nowrap; property to class “a” which keeps the line of text in the same line even if the screen size is small. Syntax: white-space: nowrap; Next, we apply white-space: normal; which is the default for “white-space”.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
css prevent new line div // You should use a <span> element instead, which is inline. // Although it's bad form, you can add style="display: inline;" to a div.
Add white-space: nowrap; to your .layout style declaration.
This will do exactly what you need: preventing the divs from wrapping.
Watch the
jsFiddle demo
or run the following snippet full screen and resize it:
.layout { white-space : nowrap; /* this does the trick */ overflow : hidden; /* this prevents the grey divs from overflowing */ vertical-align : top; border-radius : 15px; display : inline-block; } .layoutbacking { border-radius : 15px; background : #CCCCCC; padding : 5px; margin : 5px; }<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
