SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    beginner bug that is driving me nuts.

    HTML Code:
    <div id="hmContent">
    
    <div class="sl01" ></div>
    <div id="clear"> </div>
    <div class="sl02" ></div>
    <div id="clear"> </div>
    <div class="sl03" ></div>
    <div id="clear"> </div>
    </div> <!-- end of hmContent -->
    hm content is not containing the three divs. I go to google chrome to inspect it. and it has a height of 0. While it should have at least the same height as the divs that it contains. I did place a "clear" div before its closing tag.
    i really don't see why it is not working. far as i can see it is correct.
    Any really simple glaring mistakes I am not picking up on?

    Code:
    #clear{
    margin:0px;
    padding:0px;
    }
    #hmContent{
    width: 100%;
    height:auto;
    margin:0px auto;
    background-color:#ff5500;
    }
    #hmContent .sl01{
    	width:30.55555555555555%;
    	background-color: #b2d1d1;
    	height:300px;
    	margin:0px 10px;
    	border-left: 2px solid #000;
    	float:left;
    }
    
    #hmContent .sl02{
    	width:30.55555555555555%;
    	background-color: #b2d1d1;
    	height:300px;
    	margin:0px 10px;
    	//margin-left:30.55555555555555%;
    	border-left: 2px solid #000;
    	float:left;
    }
    #hmContent .sl03{
    	width:30.55555555555555%;
    	background-color: #b2d1d1;
    	height:300px;
    	margin:0px 10px;
    	//margin-left:61.11111111111109%;
    	border-left: 2px solid #000;
    	float:left;
    
    }

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I had to read that 10 times and then I finally figured it out. Lol. I kept reading it as... "Hmmm the content" but its obviously hmcontent. You floated the inards. So the outer collapses. You can do many ways. But the easiest is either float the outer also or give it overflow hidden.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    802
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hmmm. yes!
    holy smoke eric, you are indeed a site point wizard. your solution worked.
    I had not realized that that floating the inner divs would affect the container div as it did.
    Thank you.
    d

    ps...looks like floating the container and giving it overflow:hidden; have the same results. any differences i should watch out for?
    Thx

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks bud. They both will do the exact same thing. Overflow hidden will cut off any content that extrudes outside the box. And if floating the outer container you then need to contain or clear it. Simply adding clear both to the following element will clear it. Or you can add another element to do it

    <br style="clear:both>

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    looks like floating the container and giving it overflow:hidden; have the same results. any differences i should watch out for?
    It depends what else is happening on the page. Obviously if you flat the outer element you might then have the same problem with ITS parent element, and you can end up floating everything just to contain these few divs, which isn't a sensible way to build a page. I would tend to get out of the float and go to overflow:hidden as soon as you can, so that the only elements that you have floating are those that actually need to be floated.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •