CODEWITHSUNDEEP
javascripthtmlcss
Mikey S.
Mikey S.

Reputation: 3331

CSS: Expanding a floating element's width based on its contents

A colleague of mine was working on a CSS design which contains an un-ordered list (<ul> tag) that has its <li> tags floated to right.

Each list item contains a <div> (non-floating) which contains an image and a paragraph.

The inner <div>'s width is being changed when hovering above it (using a jQuery animation effect).

The problem is that when the <div>'s width is changed, it goes outside of the <li> bounds.

Generally speaking, is there a way to expand or shrink a floating element based on its content elements' maximum width?

Upvotes: 1

Views: 692

Answers (1)

Ariel
Ariel

Reputation: 26753

Just don't set any width on the LI or the UL and it will expand. Floated elements automatically "shrink-wrap" around their content - unless so specifically request otherwise by setting a height or width.

Upvotes: 4

Related Questions