Float needed, but adding extra background

HTML & CSS
1

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

Hi, Brian. See if this works for you:

style.css (line 287)


#MainArea {
    margin: 0 auto;
    [color=blue]overflow: hidden;    /* add me */[/color]
    width: 80%;
}

(line 295)


#MainArea h1 {
    background-color: #700008;
    color: #FFFFFF;
    [color=blue]margin: 0;    /* add me */[/color]
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
}

(line 330 et.al.)


#column1 img {
    border-bottom: 1em solid #700008;
    [color=red]margin-top: -1.5em;   /* delete me */[/color]
}

(line 419)


#column4 > p {
    background-color: #135588;
    color: #FFFFFF;
    font-size: 0.75em;
    [color=blue]margin: 0;    /* add me */[/color]
    padding: 1em 0.25em;
    text-align: center;
}

Looks like default margins are still your nemesis. :slight_smile:

3

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

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.