Need border inside not outside div

Hello,

I am trying to create a liquid layout structure. When i create a div boarder to the left and right of my content wrapper, it effectively makes the div look a extra 2 pixels wider than the header and footer (as they both do not use borders).


div#content-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
 border-top: solid 1px #cfcfcf;
 border-left: solid 1px #cfcfcf;
 border-right: solid 1px #cfcfcf;
 background-color: #FFFF99;
}

I have attached a screenshot to show you what I mean

With a fixed layout all i need to do is remove 2px from the width of the content wrapper to fix this problem, but it is not so easy when using a liquid structure as I am dealing with %'s.

Can you suggest any alternative way to sort this problem out?

Thanks a lot!! :slight_smile:

The thing about borders is that they are not apart of the content width of the element. This means that when you add a border, the width of the border will be added to the width of the element.

So a 1px solid border which is applied to a div element, will add 2 pixels to its width and height thus making it appear 2 pixels longer and taller, but the CSS width (content width) is still the same.

When you refer to a liquid layout, you obviously mean a layout that adapts to it’s browser resolution? Correct? So it’s most likely a full screen layout? No?

Using some math and javascript you could simply detect the size of the browser’s client window, remove two pixels, and then convert the it to a % and apply to the div element (div_element.style.width=“99%”;).

Hi Matssko, thankyou for your reply, yes I think you are correct. The only thing is that if i convert it to a % it would have to be very accurate, ie 1% is too much.

The only other way I can see that i can achieve this is to add a 1px wide div on either side of the the content wrapper using only a background color, though I see this as a little messy!

Can you post your html? A picture won’t be very useful. Your description is clear enough, but we need to see the structure of the page.

Hi CaryD,

Sure the full HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="styles.css" type=text/css rel=stylesheet>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-left"></div>
<div id="header-logo"><img src="logo.gif"></div>
<div id="header-right"></div>
<div id="header-cartoptions"><img src="tpheader-cartoptions.gif" width="98" height="70"></div>
<div id="header-search"><form name="quick_find" action="/advanced_search_result.php" method="get"><input type="text" name="keywords" size="10" maxlength="30" style="width: 150px; height:16px; vertical-align:top;">&nbsp;<input type="image" src="tpheader-search-button.gif" border="0" alt="Quick Search" title="Quick Search"><a href="/advanced_search.php"><img src="tpheader-advanced-search.gif" height="22" width="58" border="0" alt="Advanced Search"></a>
</form></div>
</div>
<div id="content-wrapper">
      <div id="navcol">
          <h4>Left Column</h4>
            <p>Test test</p>
            <p>testtest</p>
            <p>test test teast.</p>
      </div>
        <div id="sidecol">
            <h4>Right Side Column</h4>
            <p>Test test</p>
            <p>testtest</p>
            <p>test test teast.</p>
        </div>
        <div id="main">
            <h2>Main Content</h2>
            <p>Tempests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests empests </p>
            </div>
        <div class="clear">&nbsp;</div>
  </div>
<div id="foot">
    <p>Footer</p>
</div>
</div>
</body>
</html>

The full CSS Code


body {
margin:3%;
padding:0;
text-align:center;
font-family: verdana,arial,helvetica,sans-serif; 
font-size:.75em;
background-color: #FFFFFF;
margin-top: 10px; 
}
div#header {
    height: 70px;
 background-image:url(headerbg.gif);
}
div#header-left {
 background-image:url(tpheader-left.gif);
 height:70px;
 width: 19px;
 float:left;
 }
div#header-right {
 background-image:url(tpheader-right.gif);
 height:70px;
 width: 19px;
 float:right;
 }
div#header-logo {
 height:70px;
 width: 174px;
 float: left;
 }
div#header-search {
 position:relative;
 top:28px;
 height:70px;
 width: 65%;
 margin-right:-15%;
 float:left;
  }
div#header-cartoptions {
 height:70px;
 width: 120px;
 float: right;
 }
div#menu {
}
div#navcol {
    width: 18%;
    float: left;
}
div#main {
    padding-left: 10px;
 padding-right: 10px;
}
div#sidecol {
    width: 18%;
    float: right;
}
div#foot {
    background-color: #CCCCCC;
    padding: 10px;
    text-align: center;
    clear: both;
}
div#wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
 text-align:center;
 min-width:750px;
 max-width:900px;
}
div#content-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
 border-top: solid 1px #cfcfcf;
 border-left: solid 1px #cfcfcf;
 border-right: solid 1px #cfcfcf;
 background-color: #FFFF99;
 min-width:750px;
 max-width:900px;
}
.clear {
    clear: both;
    display: block;
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
 

Cheers :cool:

With regard to the border issue, try this styling:

div#content-wrapper {
	margin: 0;
	padding: 0;
	border-top: solid 1px #cfcfcf;
	border-left: solid 1px #cfcfcf;
	border-right: solid 1px #cfcfcf;
	background-color: #FFFF99;
}

You shouldn’t have to give the width of the div as it will automatically extend across its containing div’s entire width.

You can fix the problem with #main by giving it side margins like this:

div#main {
	padding-left: 10px;
	padding-right: 10px;
	margin-left:18%;
	margin-right: 18%;
}

Wow thank you very much!!! You are an absolute star! You wont believe how many hours i have spent trying to sort this one out!

THANK YOU again! :smiley:

Yeah I forgot about that. As long as a div has a display:block, then it will be 100% in width. The difference is that a block div will be 100% in actual width (which is the width of the box + the width of the border).