Reputation: 65550
I want to have a table (with an arbitrary number of columns) floated left, and some text floated left next to it if there is space, or down below it if there is not.
<div class="table">
<table>... table with arbitrary number of columns</table>
</div>
<div class="content">
Headings and paragraph text here (in a separate column, not flowing around the table)
</div>
I'd like the layout to be as follows:
I've started by just applying { float: left }
to both divs, but it's not working - the second div is always below the first. Why? I thought float: left
should wrap text.
JSFiddle here: http://jsfiddle.net/R9axt/1/
Upvotes: 0
Views: 97
Reputation: 276
Please try this FIDDLE. there is slight changes in your CSS. May solve your problem.
.visualisation-table {
border: 1px solid blue;
float: left;
width: 48%;
}
.visualisation-moreinfo {
border: 1px solid red;
width:48%;
float: left;
}
Upvotes: 0
Reputation: 17366
Remove float:left
from the .visualisation-moreinfo
class as it will stretch it to the left below the table and there is no need to set display:table
to a table
.visualisation-moreinfo {
border: 1px solid red;
overflow:hidden;
/* float:left */ Removed */
}
Upvotes: 1