1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Auto height in content div not correct in Firefox

Discussion in 'CSS' started by artdog, Aug 3, 2006.

  1. #1
    I imagine this is something simple but I am stumped
    SEMrush
    http://www.evocreative.com/easternbabes/detail.html

    The main content div is set to auto height. My understanding of this is that the div should then expand with the nested content. It is working correctly in IE (that's a first!) but not in Firefox.

    Please help!

    #wrapper {
    	font-family: Arial, Helvetica, sans-serif;
    	width: 800px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	height: 300px;
    	background-repeat: no-repeat;
    	margin-top: 70px;
    	background-color: #FFFFFF;
    }
    #content {
    	font-family: Arial, Helvetica, sans-serif;
    	width: 800px;
    	height: 600px;
    	background-image: url(images/home_main_image.jpg);
    	background-repeat: no-repeat;
    	background-color: #FFFFFF;
    }
    #top {
    	margin: 0px;
    	height: 265px;
    	width: 100%;
    }
    #top #header {
    	height: 64px;
    	border-top-color: #D30D0F;
    	border-bottom-color: #D30D0F;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-bottom-width: 2px;
    	border-top-width: 2px;
    	background-image: url(images/logo.jpg);
    }
    #tagline {
    	background-color: #D30D0F;
    	float: left;
    	height: 36px;
    	width: 600px;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #FFFFFF;
    	padding-left: 200px;
    }
    #bottom {
    	padding: 0px;
    	height: auto;
    	width: 100%;
    	background-color: #FFFFFF;
    }
    #bottom #left {
    	float: left;
    	height: auto;
    	width: 183px;
    	padding-left: 11px;
    }
    #bottom #right {
    	width: 606px;
    	margin-left: 0px;
    }
    #right #topbabes {
    	float: left;
    	height: 260px;
    	width: 575px;
    	padding-top: 11px;
    	padding-left: 25px;
    }
    .bigbabes {
    	float: left;
    	height: auto;
    	width: auto;
    	margin-right: 45px;
    }
    .bigbabename {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10pt;
    	font-weight: bold;
    	color: #8A8C8D;
    	text-align: center;
    	padding-top: 5px;
    }
    .bigbabesright {
    
    	float: left;
    	height: auto;
    	width: auto;
    	margin-right: 0px;
    }
    #homethumbs {
    	background-color: #F2F2F2;
    	float: left;
    	height: 235px;
    	width: 575px;
    	padding-left: 25px;
    }
    .homethumb img {
    	border: 1px solid #CE0C0C;
    }
    .homethumblast img {
    	border: 1px solid #CE0C0C;
    }
    #homethumbs .homethumb {
    	float: left;
    	width: 50px;
    	margin-right: 33px;
    	margin-top: 10px;
    }
    .thumbtext {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	font-weight: bold;
    	color: #666666;
    	text-align: center;`
    	padding-top: 5px;
    	line-height: 9pt;
    }
    #homethumbs .homethumblast {
    	float: left;
    	width: 50px;
    	margin-top: 10px;
    }
    #signup {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-weight: bold;
    	color: #D30D0F;
    	background-color: #E3E3E3;
    	height: 160px;
    	width: 167px;
    	float: left;
    	margin-top: -50px;
    	margin-left: 10px;
    }
    #nav {
    	position: relative;
    	left: 9px;
    	top: -67px;
    	width: 178px;
    	height: 100%;
    	float: left;
    	
    }
    body {
    	background-image: url(images/logo.gif);
    	background-repeat: no-repeat;
    	text-align: center;
    	background-position: center top;
    	background-color: #CCCCCC;
    }
    #babes {
    	width: 560px;
    	height: 520px;
    	margin-top: 170px;
    	float: left;
    	margin-left: 10px;
    }
    #detailtext {
    	background-color: #f7f7f7;
    	padding: 10px;
    	float: right;
    	height: auto;
    	width: 300px;
    	min-height: 217px;
    	overflow: visible;
    }
    #detailphoto {
    	float: left;
    }
    
    
    #babes #topbabes {
    	height: 249px;
    	width: 100%;
    	margin-left: 25px;
    	margin-bottom: 15px;
    }
    #footer {
    	background-color: #CC0000;
    	float: left;
    	height: 20px;
    	width: 770px;
    	padding-top: 5px;
    	padding-left: 30px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	color: #FFFFFF;
    }
    #footer a {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    #footer a:hover {
    	color: #cccccc;
    }
    #navigation {
    	height: auto;
    	width: 85%;
    	float: left;
    	text-align: left;
    	position: relative;
    	z-index: 3;
    	margin-top: -460px;
    	margin-left: 10px;
    }
    .navlink {
    	float: left;
    	width: 90%;
    	padding-bottom: 15px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #FFFFFF;
    	padding-top: 15px;
    	margin-left: 15px;
    }
    .navlinklast {
    	float: left;
    	width: 90%;
    	padding-bottom: 15px;
    	padding-top: 15px;
    	margin-left: 15px;
    }
    .signupform {
    	padding: 10px;
    	width: 100px;
    	text-align: left;
    }
    .signupform input {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    	border: 1px solid #D30D0F;
    }
    .signuplabel {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	font-weight: bold;
    	color: #D30D0F;
    	text-align: left;
    }
    #left {
    	float: left;
    	height: auto;
    	width: 178px;
    }
    .thumbtext a {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	color: #666666;
    	text-decoration: none;
    	text-align: center;
    }
    .thumbtext a:hover {
    	color: #D30D0F;
    
    }
    .homethumblink a {
    border: 1px solid #000000;
    }
    .bigbabename a {
    	text-decoration: none;
    	color: #8A8C8D;
    }
    .bigbabename a:hover {
    	text-decoration: none;
    	color: #D30D0F;
    }
    #insidethumbs {
    	float: left;
    	height: 235px;
    	width: 540px;
    	padding-left: 25px;
    }
    #insidethumbs .insidethumb {
    	float: left;
    	width: 76px;
    	margin-right: 37px;
    	margin-top: 10px;
    }
    #insidethumbs .insidethumblast {
    	float: left;
    	width: 76px;
    	margin-top: 10px;
    }
    .insidethumb img {
    	border: 1px solid #CE0C0C;
    	margin-bottom: 5px;
    }
    .insidethumblast img {
    	border: 1px solid #CE0C0C;
    	margin-bottom: 5px;
    }
    #babescroll {
    
    	width: 600px;
    	height: 500px;
    	margin-top: 157px;
    	float: left;
    	padding-left: 5px;
    	overflow: auto;
    	padding-bottom: 10px;
    }
    #detailtop {
    	background-color: #D30D0F;
    	float: left;
    	width: 100%;
    	height: 24px;
    	text-align: left;
    }
    #detail {
    
    	width: 565px;
    	height: auto;
    	margin-top: 170px;
    	float: left;
    	margin-left: 10px;
    }
    #detailtext .myself {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	line-height: 13pt;
    	color: #666666;
    	float: left;
    	height: auto;
    	width: 93%;
    	text-align: justify;
    	margin-top: 5px;
    	margin-left: 10px;
    }
    .detailhdr {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11pt;
    	font-weight: bold;
    	color: #D30D0F;
    }
    #stats {
    	background-color: #ECECEC;
    	float: right;
    	width: 300px;
    	height: auto;
    	padding-top: 10px;
    	padding-left: 20px;
    	padding-bottom: 10px;
    	overflow: visible;
    	margin-bottom: 10px;
    }
    #stats #statsleft {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	float: right;
    	width: 50%;
    	text-align: left;
    	color: #666666;
    }
    #stats #statsright {
    
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    	line-height: 12pt;
    	float: left;
    	width: 50%;
    }
    .statshdr {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	font-weight: bold;
    	color: #D30D0F;
    	line-height: 16pt;
    }
    .statshdr2line {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	font-weight: bold;
    	color: #D30D0F;
    	line-height: 9pt;
    }
    .stats2line {
    	line-height: 9pt;
    }
    #content2 {
    
    	font-family: Arial, Helvetica, sans-serif;
    	width: 800px;
    	height: 600px;
    	background-image: url(images/home_main_image.jpg);
    	background-repeat: no-repeat;
    	background-color: #FFFFFF;
    	padding-bottom: 50px;
    }
    #detailsflashleft {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: bold;
    	font-style: italic;
    	color: #FFFFFF;
    	margin-left: 10px;
    	font-size: 10pt;
    	margin-top: 3px;
    	float: left;
    
    }
    #detailsflashright {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: bold;
    	font-style: italic;
    	color: #FFFFFF;
    	font-size: 9pt;
    	margin-top: 3px;
    	float: right;
    	margin-right: 10px;
    
    }
    
    Code (markup):
     
    artdog, Aug 3, 2006 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #2
    IE is acting incorrectly. A container should not enclose its float descendants unless certain requirements are met. The float element is out of the flow and is invisible to other block elements. Google "css float tutorials" to get the basics. The floatutorial link is great. Further, study my enclosing float elements demo.

    cheers,

    gary
     
    kk5st, Aug 3, 2006 IP
  3. asimov77

    asimov77 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Try using the 'overflow:hidden;' property inside the div that you're having problems with

    I was having the same prob but I found that overflow:hidden; auto adjusts the div's height without even having to specify any other height for that div.

    It works in ie6, ie7 and FF

    Thanks to e-fun for the solution
     
    asimov77, Dec 16, 2008 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    As Gary said, this is an IE bug. Firefox is performing correctly.
     
    drhowarddrfine, Dec 16, 2008 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #5
    My previous host is no more, so my link above is dead. You may now find it here, enclosing float elements.

    Sorry about the inconvenience.

    cheers,

    gary
     
    kk5st, Dec 16, 2008 IP
  6. lonewolff

    lonewolff Member

    Messages:
    338
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #6
    Interesting hack. It worked for my problem, too.

    But in the end I set the float in the parent container and that also fixed the problem and probably a better way to go.
     
    lonewolff, Apr 10, 2009 IP
  7. Trần Tuấn Mỹ

    Trần Tuấn Mỹ Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #7
    I try using for your solution overflow:hidden, and I get an expected result.
    Thanks guy a lot :)
     
    Trần Tuấn Mỹ, May 15, 2015 IP
  8. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #8
    You may find that you have fewer problems if you use inline-block where you can instead of float. That way the element is contained but behaves in much the same way as a float. It does not solve all such problems, but anytime you can avoid using clearfix workarounds it is a step ahead.
     
    COBOLdinosaur, May 15, 2015 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,399
    Likes Received:
    1,875
    Best Answers:
    245
    Trophy Points:
    515
    #9
    You've got a LOT of code that just doesn't make any sense -- like having the heading (h1) under which EVERYTHING on the page is a subsection in an ASIDE (not that ANY of the HTML 5 "structural" tags make the least bit of sense), multiple same-level H1 without the rubbish HTML 5 tags separating them, The ONE thing that should be a H1 on the page as a DIV + IMG tags (said images being presentational having no business in the markup anyways), sets of anchors as run-on sentences lacking proper block level or character level separators, gibberish forms, endless pointless DIV, classes and ID's for nothing, NAV inside a NAV (pretty much ignoring what NAV means, NOT that there's any legitimate reason to use NAV if you were using headings properly), H1+H2 paired despite the latter not actually starting a new subsection of the page (reeking of the HGROUP style presentational markup nonsense that pretty much ignores what numbered headings MEAN), ARTICLE tags (more HTML 5-tardery) wrapping single non-content elements (IMG tags) for NOTHING, incomplete/inaccessible forms (Placeholder is NOT a label!) static style in the markup...

    STYLING that is the least of your worries... of course it looks like Turdpress, so said laundry list of "how not to write HTML" is pretty much to be expected; particularly once HTML 5-tardery is slathered all over it any-old-way with utter and complete ignorance of what any of those tags actually mean/are for.

    The handful of CSS you've shown is equally flawed -- fixed pixel widths, fixed pixel heights, re-declaring the font-family endlessly for no reason (just set it on body and forget it!), pt font sizes and line-heights in fixed metric widths (which will cause sizing bugs in browsers that obey pt, AND pt is for print not screen - admittedly I was a hard sell on that a decade ago since mozilla browsers only obeyed pt based off the OS setting and you had to set em's default manually), changing font-size without re-adjusting the line-height, lack of condensed properties being little more than code bloat...

    The CSS is just as chock full of "How not to build a website" as the HTML is.
     
    deathshadow, May 15, 2015 IP