DIV and CSS Configuration Question

[WildcatTM]

Greetings, folks,

I recently returned to web design after about 9 or so years on hiatus. I see a lot has changed, including the use of DIV. I seem to have a grasp on most things, but I’ve hit a road block I can’t quite get around. I’m trying to create a layout page similar to this:

| Na | Se |
| Banner |
| Content |
| Footer |

This is the code I’m using:

<style>
*
{
margin: 0em;
}

#nav
    {
        float: left;
        left: 10em;
        padding: 1em 0em;
        position: relative;
    }
#section
    {
        float: right;
        right: 10em;
        padding: 1em 0em;
        position: relative;
    }
#banner
    {
        background: url(images/banner-01.jpg) no-repeat center;
        background-size: cover;
        padding: 10em 0em;
        position: relative;
    }
#footer
    {
        background-color: black;
        color: white;
        clear: both;
        text-align: center;      
    }

</style>

I can’t figure out why the div banner is overlapping with nav and section divs. Any help is greatly appreciated!

[timbarden]

Hi,

At a quick glance, a lack of clears or floats on your #banner is probably the cause. Defining some widths might help structure the layout too.

[Author]

Posts