...

View Full Version : double border problemo



PitbullMean
11-22-2010, 06:41 PM
Ok this is what I wanna do I wanna have a border on the container thats 8px of blue then a 1px outside the blue one that is black. but when i add the black one it does a full page pixel and when i try to make it the size of the container it off sets the container to the left.



#border { width:900px; border: #000 solid 1px;}
#container {
width:900px;
margin: 0 auto;
padding:14px;
background:#fff;
overflow: hidden;
border: #24456a solid 8px;
}
www.ospunho.com

DrDOS
11-22-2010, 06:59 PM
It would be probably be simplest to assign the width to the body, then any borders will be subtracted from that width, so with 900px you would have 882px left for the content.

This is the proper order for the border properties:

border:5px solid red;

Excavator
11-22-2010, 07:18 PM
Hello PitbullMean,
To center your site you need to apply width and margin:0 auto; to the containing div... in this case, #border. Centering #container inside border doesn't do much since they are the same width.

Watch you don't mess up your box model doing this. The box model (http://www.w3.org/TR/CSS2/box.html) says that margin/padding/border all count when figuring total width.

See my example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
html, body {background: #FC6;}
#border {
width: 944px;
margin: 0 auto;
border: 1px solid #000;
}
#container {
width: 900px;
padding: 14px;
background: #fff;
border: 8px solid #24456a;
}
</style>
</head>
<body>
<div id="border">
<div id="container">
some stuff here
<br />
<br />
<br />
<br />
<br />
<br />
some stuff here
<br />
<br />
<br />
<br />
<br />
<br />
some stuff here
<!--end container--></div>
<!--end border--></div>
</body>
</html>

The extra 44px on #border is to make up for your border and padding on #container.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum