Reputation: 65610
I'm trying to float some content left, with a table to the left-hand side.
Here's a JSFiddle: http://jsfiddle.net/TxLyr/1/
I'd like the text content that's currently below the table to be to the right of the table.
What am I doing wrong?
Full CSS for reference:
.container {
width: 100%;
border: 1px solid red;
}
.table-container {
width: 60%;
float: left;
overflow-x: scroll;
overflow-y: none;
}
table {
width: 100%;
border: 1px solid #ccc;
}
#aside {
float: left;
border: 1px solid blue;
}
Upvotes: 0
Views: 45
Reputation: 10285
You have to give a width 38%
on id #aside
. Here using 38% width because you are using a 1px border.
Also to clear float property you have to use overflow:hidden
property.
Upvotes: 0
Reputation: 1469
You've to set a proper width value for the #aside
element.
Since you have a border of 1px
, you cannot set the width to 40%;
. Set it to 39%
or remove the border.
You have to set the width of course. If you don't the element takes it's auto width.
#aside {
float: left;
border: 1px solid blue;
width:39%;
}
Upvotes: 2
Reputation: 4168
change it:
#aside {
float: left;
border: 1px solid blue;
width:39%; /* this line added */
}
and you can use 40% but if you have border or padding you must use box-sizing
and it's need css3
.
and box-sizing
Compatibility here:
http://caniuse.com/#search=boxsizing
Upvotes: 0