CODEWITHSUNDEEP
csshtmlborder
DonJuma
DonJuma

Reputation: 2094

Div border not showing up in the correct place

I have a div that has a blue border. This div is the footer and so it is placed at the bottom of the page. The text inside that div appears at the bottom but the border itself is showing up at the top.

Here is the HTML:

<body>

<div id="header">
this is the header
</div>

<div id="mainleft">
this is the main left
</div>

<div id="mainright">
this is the main right
</div>

<div id="footer">
this is the footer
</div>

</body>

and here is the CSS:

body{
    background-color:#666666;
}

#header{
    min-height:75px;
    border:3px solid #000099;
}

#mainleft{
    height:500px;
    width:15%;
    border-left:3px solid #000099;
    float:left;
}
#mainright{
    height:500px;
    width:84%;
    border-left:3px solid #000099;
    border-right:3px solid #000099;
    float:right;
}

#footer{
    height:70px;
    width:100%;
    border:3px solid #098099;
    bottom:0px;
}

Upvotes: 1

Views: 2362

Answers (2)

Ken Wheeler
Ken Wheeler

Reputation: 1958

Add a clear: both; to the footer element.

Upvotes: 5

CYMA
CYMA

Reputation: 677

The footer div isn't appearing at the bottom. You need a container div that wraps all the divs inside it and set its properties (width, height etc).

Upvotes: 0

Related Questions