SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    float needed, but adding extra background

    So, I'm floating some columns and for some reason it is adding more background to the top of the columns. (e.g. white space above "Personal Injury")

    http://dev.newstartlaw.clients.blinkss.com/

    If you look at style.css 319 you will see a float. If you remove that float on that section and all of the others then this extra white background goes away.

    So, how do I float these columns without adding that extra white background and in the case of the 4th column the extra light blue background?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hi, Brian. See if this works for you:

    style.css (line 287)
    Code:
    #MainArea {
        margin: 0 auto;
        overflow: hidden;    /* add me */
        width: 80%;
    }
    (line 295)
    Code:
    #MainArea h1 {
        background-color: #700008;
        color: #FFFFFF;
        margin: 0;    /* add me */
        padding: 0.5em;
        text-align: center;
        text-decoration: none;
    }
    (line 330 et.al.)
    Code:
    #column1 img {
        border-bottom: 1em solid #700008;
        margin-top: -1.5em;   /* delete me */
    }
    (line 419)
    Code:
    #column4 > p {
        background-color: #135588;
        color: #FFFFFF;
        font-size: 0.75em;
        margin: 0;    /* add me */
        padding: 1em 0.25em;
        text-align: center;
    }
    Looks like default margins are still your nemesis.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha thx. So the overflow:hidden took away the background that was showing above the header...So, by default a float fills the space above?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by BrianBam View Post
    haha thx. So the overflow:hidden took away the background that was showing above the header...So, by default a float fills the space above?
    No.

    I added overflow:hidden to #MainArea because the boxes inside were floated and floats need to be cleared in that way. It made no difference to the way your page was working. It's just a routine thing to do that had been overlooked.

    The problems were (1) the default margins on the paragraph <p> and (2) the header <h1>, plus (3) the negative margin on the image. Anytime you are tempted to use a negative top margin to lift an image or anything else, be sure you're not forgetting the possibility of default margins under the box above it.


    FYI, not on this page, but the default margins assigned to lists catch a lot of beginners off guard. Coders sometimes forget to take them into account. By default margins, I mean that lists, like paragraphs and headers, have default margin-top and margin-bottoms. It is common for coders to set those margins to zero in lists to avoid margin problems like you experienced here with the paragraphs and header.

    When coding a page, you should always be aware of selectors that have default margins: ul, ol, p, h1, h2, h3, h4, h5, h6 and more.

    And just to keep you on your toes, lists also have default padding-left that usually has to be set to zero when creating a horizontal menu.


Tags for this Thread

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
  •