CSS column breaks my table into two different columns

Question

I am trying to create newspaper columns on my page. However, my page contains tables, and in IE, Chrome, Safari and Opera the table is split into two different columns: this is not the behavior I want. Where there is a table, I would like to have it completely within the same column. Here is the code:

.newspaper { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 5px; /* Chrome, Safari, Opera */ -moz-column-gap: 5px; /* Firefox */ column-gap: 5px; } 

 <div class="newspaper"> <table> <tr><td>Table Row 1</td></tr> <tr><td>Table Row 2</td></tr> <tr><td>Table Row 3</td></tr> <tr><td>Table Row 4</td></tr> </table> <p>Paragraph</p> </div> 

An easy way to see the problem and use it is to use Chrome and go to http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap and paste the code into their example with mine. If you try Firefox, you will see that the table remains completely in the left column.

Answer 1

Add column-break-inside: avoid; to table:

 .newspaper { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 10px; /* Chrome, Safari, Opera */ -moz-column-gap: 10px; /* Firefox */ column-gap: 10px; border:dotted 1px #ccc; } .newspaper table { -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid; } 

 <div class="newspaper"> <table> <tr><td>Table Row 1</td></tr> <tr><td>Table Row 2</td></tr> <tr><td>Table Row 3</td></tr> <tr><td>Table Row 4</td></tr> </table> <p>Paragraph</p> </div> 

Answer 2

I am not 100% on what you are trying to do here ...

If you don't need 2 columns, just remove css. http://plnkr.co/edit/UtvHv0V9cydAfnO4jFwH?p=preview

If you want the paragraph to be on the right, make the table float to the left. http://plnkr.co/edit/52ly416gGmtHhAZSyrC3?p=preview

 table{ float:left; } p{ position:relative; left: 20px; }