Richard
Richard

Reputation: 65550

CSS: Float div left next to table of arbitrary width?

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:

enter image description here

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

Answers (2)

Raman Mandal
Raman Mandal

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

Dhaval Marthak
Dhaval Marthak

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 */
}

Demo

Upvotes: 1

Related Questions