SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Why Does Border Not Go All the Way Around On This Simple Example

    Hi Guys

    I'm trying to learn CSS page layout please see:

    http://www.highlycreative.co.uk/test...nav-footer.htm

    I have set a 2px border on the #container class, i.e. the main page container div. I was expecting this to produce a border right around the page content, i.e. around the header, down each side and around the footer, but it only goes around the header (I'm looking at the site in Firefox).

    Can anyone tell me why the border doesn't go all the way around like I was expecting?

    Many thanks

  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)
    Looks like you need to contain your floated stuff. Here is how http://www.visibilityinherit.com/cod...ain-floats.php once you do so the border should sorround the outer div

  3. #3
    SitePoint Enthusiast seanuk's Avatar
    Join Date
    Dec 2012
    Location
    UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    because your container div contains floated items, it doesn't know where the content ends, therefore only shows the container div around the first contained div (header)

    a quick and easy fix is to add 'overflow: hidden' to the container div.

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help guys.


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
  •