Border problem [Archive] - CodingForums.com

muzammil

12-15-2010, 02:43 PM

here is the html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
</div>
<div id="leftpart">
</div>
<div id="rightpart">
</div>
<div id="footer">
</div>
</div>

</body>
</html>

And here is the CSS code

@charset "utf-8";
/* CSS Document */

#container
{
width:900px;
margin:0 auto;
}

#header
{
background-color:#960;
height:140px;
width:100%;
}

#leftpart
{
background-color:#06C;
height:500px;
width:50%;
float:left;

}

#rightpart
{
background-color:#060;
height:500px;
width:50%;
float:right;
}

#footer
{
background-color:#F00;
height:120px;
clear:both;
}

Now the Question is When I put this code in the #leftpart
border-right:1px dashed;

the whole page breaks and footer moves down.
Could somebody Explain why???
Please bear with the question as i am very novice.

teedoff

12-15-2010, 02:50 PM

Could it be that the border is taking up 1px and you have set widths to exactly 50% to your divs which leaves no room for anything else. Try changing #leftpart to width: 49%;

Thats just a guess, but its worth a try.

btw I just confirmed that thats what is going on. If you have two divs floated side by side and they both take up 100% of the space, then adding a border of even 1 px will force the div next to it down, since there is no more room for it there. Do some reading on the box model. You can google it.

You should probably consider using pixels for your widths for right and left part divs.

Also. please use the # button when posting code. Makes it much easier to read when surrounding your code with code tags. Thanks