Bob, you removed to much margins. The magic was caused by the negative margins. The gap was intended. You can remove it by adjusting the negative margin and the width of adleft2.
regards, Martin on Thursday, October 8, 2009 at 13:02 wsg@webstandardsgroup.org wrote: > Actually Martin, > The flexible div does still expand to fit the whole wrapper in FF3 etc. It > is disguised by the background colours. If you remove all the bk colours > apart from the elastic one, you'll see this in action! > :-( > Bob > ----- Original Message ----- > From: "designer" <desig...@gwelanmor-internet.co.uk> > To: <wsg@webstandardsgroup.org> > Sent: Thursday, October 08, 2009 10:24 AM > Subject: Re: [WSG] elasticity and floats >> >> Thanks Martin, >> >> I tried your mark-up, but found a gap between adleft1 and 2. I shifted the >> outer div, removed the margins and Presto! [1] However, I'm getting >> confused >> now as to why this should work whilst others didn't [2] >> >> Bob >> >> [1]http://www.rspcacornwall.org.uk/testbed/floatdivs_martin.html >> >> [2] http://www.rspcacornwall.org.uk/testbed/floatdivs_cjapplied.html >> >> >> >> >> ----- Original Message ----- >> From: "Martin Heiden" <martin.hei...@netcologne.de> >> To: "designer" <wsg@webstandardsgroup.org> >> Sent: Wednesday, October 07, 2009 8:36 PM >> Subject: Re[2]: [WSG] elasticity and floats >> >> >> >> Hi Bob! >> >> May I add another wrapper div? Try the following. Probably you want >> to tweak some withs and margins. >> >> Regards, >> >> Martin. >> >> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> >> <html xmlns="http://www.w3.org/1999/xhtml";> >> <head> >> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> >> <title>Test</title> >> <style type="text/css"> >> #outer { >> border: 1px solid red; >> width: 50%; >> } >> #inner { >> margin-left: 250px; >> margin-right: 100px; >> } >> #adleft1 { >> float: left; >> width: 100px; >> height: 100px; >> margin-left: -250px; >> background: #c00; >> } >> #adleft2 { >> float: left; >> width: 100px; >> height: 100px; >> margin-left: -100px; >> background: #0c0; >> } >> #adcenter { >> height: 100px; >> background: #00c; >> margin: 0 -1px; >> } >> #adright { >> float: right; >> width: 100px; >> height: 100px; >> margin-right: -100px; >> background: #c00; >> } >> </style> >> </head> >> >> <body> >> <div id="outer"> >> <div id="inner"> >> <div id="adleft1"></div> >> <div id="adleft2"></div> >> <div id="adright"></div> >> <div id="adcenter"></div> >> </div> >> </div> >> </body> >> </html> >> >> >> >> >> >> >> >> ******************************************************************* >> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm >> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm >> Help: memberh...@webstandardsgroup.org >> ******************************************************************* >> >> >> > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ******************************************************************* regards Martin ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
