CODEWITHSUNDEEP
css
Richard
Richard

Reputation: 65610

CSS: float content next to a table

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

Answers (3)

Kheema Pandey
Kheema Pandey

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

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

You've to set a proper width value for the #aside element.

Fiddle

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

A1Gard
A1Gard

Reputation: 4168

change it:

#aside { 
    float: left;
    border: 1px solid blue;
    width:39%; /* this line added */
}

http://jsfiddle.net/TxLyr/9/

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

Related Questions