#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    4
    Rep Power
    0

    Background height issues


    hello, im gonna try to explain my problem.
    I have a wrapper div with a background image that is repeated on Y.
    Within that wrapper i have a content div, there are messages that come from a database.

    the problem is that the wrapper (and the background) isnt expending to the text that is in the content div. How to make the wrapper expend to the size of the content div!?.

    here are my divs:
    Code:
    div.wrapper{
    	position:relative; 
    	width:900px;
    	background:transparent url(images/templatemo_content_bg.jpg) repeat-y scroll 0 0;
    	margin:auto;
    }
    	
    div.content{
    	float:left;
    	width:550px;
    	margin-left:20px;
    }
    i changed alot to try and now im totaly lost xD

    greetings Razedd
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4309
    Welcome to DevShed Forums, Razedd.

    That's a very common issue. An element doesn't automatically expand to contain its floated children by default. I suggest you read up on clearing and containing floats. Other than floating the parent of the floated element(s) too, which isn't always a good option, the PIE/Aslett approach is best.

    So to use the PIE/Aslett approach, you would add the following snippet to your stylesheet. (This is the full version. Let me know if you would prefer a shorter version that drops support for IE5/Mac and/or IE5.0/Win.)
    Code:
    div.wrapper:after {
      content:".";
      display:block;
      clear:both;
      height:0;
      visibility:hidden;
    }
    div.wrapper {display:inline-block;}
    /* Hide from IE5/Mac \*/
    * html div.wrapper {height:1px;}
    div.wrapper {display:block;}
    /* End hide */
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    4
    Rep Power
    0
    Thankyou!

    Okee, at this moment i don't care about mac or IE5 but ill just put it in.
    Oke now I see I really don't know much.
    Do I need to replace this with my wrapper or do I add it.
    What does the wrapper:after mean. Is it a special meaning or is it just a name.


    I added it and tested it. Firebug sees the div but it has no styles except for the inherited ones from body.

    Sorry for the rain of questions but i want to understand

    Thanks in advance,
    Razedd
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4309
    Wow. It's unusual that someone wants to understand how that technique works. I'm very glad you're interested in learning. These two articles explain it fairly well. If you still have any questions about it after reading them let me know.
    http://www.positioniseverything.net/easyclearing.html
    http://www.csscreator.com/attributes/containedfloat.php

    Do I need to replace this with my wrapper or do I add it.
    I meant it should be used in addition to the existing rules in the stylesheet. One may make as many style rules that should be applied to any given HTML element as one wants. 5 rules is no problem.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    4
    Rep Power
    0
    By now I messed around and i saw that this is what i need.
    Code:
     	display:inline-block;
    then my wrapper is around my two child divs. Only it moves!xD
    It moves to the left. I thought that with position relative it shouldnt do that.

    btw. it seems to me that these are useless. firebug doesnt see them.
    Code:
     
      content:".";
      display:block;
      clear:both;
      height:0;
      visibility:hidden;

    EDIT:
    It is on the right place in IE... anybody knows?

    ps: sorry, this must be some very confusing posts.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4309
    Firebug doesn't show :before and :after rules in the HTML tab. You have to use the CSS tab to look at them. Firebug is a great tool, but it isn't perfect.

    Auto left and right margins, which center an element with display:block, don't center one with display:inline-block. In that technique it's used to trigger IE/Win's mystical hasLayout flag. To understand what hasLayout is, read this: http://reference.sitepoint.com/css/haslayout

    Look, that approach is a complex solution to the problem. Every part of it is necessary in one browser or another, though like I said before, certain parts of it aren't needed if you don't care about IE versions before 5.5. I prefer it because it works in several situations where the alternatives don't.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    4
    Rep Power
    0
    Thanks alot for helping!

    greetings Razedd

IMN logo majestic logo threadwatch logo seochat tools logo