CODEWITHSUNDEEP
csspositioncss-float
ryanzec
ryanzec

Reputation: 28040

CSS Floating Height Issues

So I have this page:

http://demo.unlockedmanagement.com/example/floating-issue.html

You will notice 3 items: Details, Attachements, and Description. Now the issue comes when you expand the Details (just click on the title). The Attachment text gets thrown under the second ul in the detail content. The thing is the the Attachments should be on their own line.

I am using the clearfix method to try to fix floating elements not having width described here : http://www.webtoolkit.info/css-clearfix.html : except that mine is only doing a clear: right;. Now obviously the first ul with is floating left has a higher height than the second ul that is floating right however the height of the parent elements seems to be taking the height of the second ul, not the first one which is bigger.

Anyone see what I am doing wrong here?

Upvotes: 2

Views: 106

Answers (1)

KodeKreachor
KodeKreachor

Reputation: 8882

Have you tried setting your floating containers to display:inline-table? This should allow the floating elements to layout in relation to their siblings and shift when their surrounding elements grow or shrink in size.

Upvotes: 1

Related Questions