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
******************************************************



Reply via email to