Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Float Issue ¦ CSS Layout


SuzyUK - 4:52 am on Jul 9, 2008 (gmt 0)


but logically parent div is a container div which contains both the div. in this case parent div should adjust the height accordingly.

Hi tricker.. see fotiman's post#2

floats are removed from the flow, this is the correct behaviour.. anyway when using floats for layout this means the the parent doesn't "contain" them any more so you need to tell the parent div

a: that it's got some content, add <br style="clear: both;"> (or some other empty element) after the two floats but before you close the parent div - this makes the parent think it's got some content

or

b: use a CSS workaround like the "easyclearing" (Aslett) method - if you want search for that you'll find it on P.I.E.

or

c: either add float: left or overflow: auto; (or hidden) to the parent div, these are the two newer/"correct" ways to instruct the parents to contain their floats.. whichever you choose will depend on your layout, e.g. float might not be so good if you've a centered layout

all the above might have a drawback depending on your design and which browsers you're looking at supporting


Thread source:: http://www.webmasterworld.com/css/3693162.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com