CODEWITHSUNDEEP
htmlcsscss-float
lunr
lunr

Reputation: 5269

Adding float: left breaks list

I have a visual element called a "plan", that is listed in a html page. Each "plan" has a small table and an image, that i want to show side by side. Without any styling it looks like this: http://jsfiddle.net/DCTwd/1/

I thought i could use float: left in table and image to make them display in the same row, but that doesn't work. Isn't it possible to use float: left inside a li? Else how can i achieve this?

Upvotes: 0

Views: 93

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

I would use an inline-table which is well supported as of CSS2.1:

table {
    display: inline-table;
}

I build a demo at: http://jsfiddle.net/audetwebdesign/cYDUC/

You need to pay attention to padding and margin around your ul and li elements and hide the bullet on the left (unless you want to display it).

If you need to support IE7, you can use display: inline and adjust padding and margin around the elements accordingly.

Upvotes: 2

PlantTheIdea
PlantTheIdea

Reputation: 16359

no need for ancient float:left;, when display:inline-block; is your best friend!

your updated jsFiddle. this is an overly simple example, so your actual CSS should involve class-based rather than element-based CSS, but it gets the point across.

Notice the fallback of zoom:1; *display:inline; for IE7-, and vertical-align:middle; for aesthetics. You can also use top or bottom, whatever works for you.

Upvotes: 1

Related Questions