For those playing along at home... Patrick's answer led me to an interesting page. Many of you are probably familiar with this, but here's a way to fix the problem I had without adding an extra div to the document: http://www.positioniseverything.net/easyclearing.html
works great in CSS2 browsers, degrades will in IE (since IE has it's own bug - it always contains floated divs). scott -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Patrick H. Lauke Sent: Wednesday, August 11, 2004 10:41 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] floating an image hides the container's background If you float all the content of a div, you take that content out of the normal document flow. The containing div is now empty, and doesn't wrap around the floated elements anymore...it's still there, but has a height of 0 (or well, of whatever non-floated content is left there, in your case). Either keep one element non floating, or add something with a clear property after the floated elements. Patrick Scott Reston wrote: > I'm experiencing a problem with Mozilla/Safari. I have a container div with a > background and two floated elements inside it. when I float one, I get the infamous > IE 3px bug[1]. so... I float both (since this avoids the problem with the 3px bug) > and the background of the containing div vanishes. > > with float applied to div and image: > http://www.capstrat.com/development/obrienatkinsx/test1.html > > with float applied only to the div: > http://www.capstrat.com/development/obrienatkinsx/test2.html > > > the elements in question are: > > div#content-main #portfolio-text { > margin: 0; > float: left; > padding-top: 30px; > width: 186px; > font-size: .8em; > } > > img#portfolio-image { > float: left; > width: 465px; height: 465px; > margin-left: 1px; padding: 0; > } > > > [1] http://positioniseverything.net/explorer/threepxtest.html > > > can someone give me some guidance on this? > > thanks! > > Scott Reston > Director, Web Development > Capstrat > 919/882.1966 v > 919/834.7959 f > 1201 Edwards Mill Road, Suite 102 > Raleigh, NC 27607 > www.capstrat.com > > > > -----Original Message----- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > Behalf Of russ - maxdesign > Sent: Wednesday, August 11, 2004 8:04 AM > To: Web Standards Group > Subject: [WSG] Some light reading... > > > Westciv's free online CSS course - week 1 of CSS Level 1: > http://www.westciv.com/courses/free/index.html > > A Better Image Rotator: > http://www.alistapart.com/articles/betterrotator/ > > WaSP Interviews Jim Ramsey on the redesign of The San Francisco Examiner > http://www.webstandards.org/learn/interviews/jramsey/ > > Pixy-style CSS no-preload rollovers, with PNG support for IE > http://devilock.mine.nu/pixie/ > > Redesign of WWF UK: > http://www.wwf.org.uk/core/index.asp > > Andy talks about the redesign of WWF UK: > http://www.stuffandnonsense.co.uk/archives/wwf.html > > New PGA site launch: > http://www.pga.com/pgachampionship/2004/ > > Behind the scenes of PGA rebuild: > http://whatdoiknow.org/archives/001797.shtml > > Learning CSS: > http://9rules.com/whitespace/design/learning_css.php > > Thanks > Russ > > ****************************************************** > The discussion list for http://webstandardsgroup.org/ > > Proud presenters of Web Essentials 04 http://we04.com/ > Web standards, accessibility, inspiration, knowledge > To be held in Sydney, September 30 and October 1, 2004 > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ****************************************************** > > ****************************************************** > The discussion list for http://webstandardsgroup.org/ > > Proud presenters of Web Essentials 04 http://we04.com/ > Web standards, accessibility, inspiration, knowledge > To be held in Sydney, September 30 and October 1, 2004 > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ****************************************************** > > > > -- _____________________________________________________ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ****************************************************** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
