SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background disapears with float left

    Why does my background, should be a blue line across the top, that I have set for a div (#divHeader) disappear when I set the image inside it to float left?

    My css for divHeader:
    #divHeader {
    background-image: url(../images/new/top-band.gif);
    background-repeat: repeat-x;
    }

    I have another image I want to place inside the divHeader to float on the right side. This is why I am setting it up this way. If I remove FLOAT from the css the background shows up fine.

    Also why I am at it,

    If I try to place another div under divHeader it moves up next to the image that floats left. I do not understand this. The divHeader is not set to float left, the image inside it is. So why would a div placed below divHeader move up next to the image?


    Thanks

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The float:left, by defualt, is placed in the top left of the containing element.

    You can set it to position:relative, and move it down enough to allow the background to show.

    As for floating an element below #header, with a floated element in #header, you shouldn't have any problem, as long as you have it all in a container div, the lower float should line up with the bottom of the #header div, providing you have enough hight for the header div to clear the contained float. Turn the border on and check it.

  3. #3
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got the top part working, when you float an image, you take it out of the element in that the elament will collapse to its mini. (it is no longer being held open by the height of the image since the image is now set to float) So I had to go into the css and set divHeader to the height of the image. This pretty much fixed everything.

    Thanks.

  4. #4
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by htown
    I got the top part working, when you float an image, you take it out of the element in that the elament will collapse to its mini. (it is no longer being held open by the height of the image since the image is now set to float) So I had to go into the css and set divHeader to the height of the image. This pretty much fixed everything.

    Thanks.
    Yes, when you float an element it's taken out of regular document flow, so the #header thinks theirs nothing in it to prop it open, and will collaps until it finds either another element, or a set height, if that height is greater than that of the float, you won't even notice it.

    Also, you might want to check how it displays in other browsers, such as FF.

    If the height of the #header is set to the height of the contained float, it might cause the float below to float only to the right side of the above float.

    To solve this, give the below float a clear:left.


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
  •