SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background colour with floated elements

    On a page of my website at http://www.southgatecountyschool.co.uk/song.php below the menu does not have the blue background of the rest of the <nav> section which I suspect is due to other floated objects on the page. Can anyone enlighten me how to get the background colour please? The rest of the pages are okay.
    blessed are the cracked for they let in the light

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh dear - I've done it again! I've fathomed the answer myself. The judicious use of <br style="clear:both"> seems to have solved the problem.
    blessed are the cracked for they let in the light

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,889
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    When a div is floated it requires a width and height element for the background color to be effective or as you discovered a line break with clear both.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    When a div is floated it requires a width and height element for the background color to be effective or as you discovered a line break with clear both.

    To clarify: when an element CONTAINS ONLY FLOATS, and you wish IT to not collapse) (background to be visible, push down other elements, etc; ) You must cleat he floats some how. Adding a block element with clear:both as the LAST item will accomplish this. HOWEVER there are far better methods that dont require unsemantic markup.

    Delete the BR and try giving the containing element "overflow:hidden"

    Hope that helps.

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for explaining Dresden. I'll give that a go...
    blessed are the cracked for they let in the light

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    To clarify: when an element CONTAINS ONLY FLOATS, and you wish IT to not collapse) (background to be visible, push down other elements, etc; ) You must cleat he \
    To clarify, when floats are the last child(ren) of a parent block, you must clear the floats

    Off Topic:

    Sorry
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •