Overlapping borders for side by side divs

HTML & CSS
1

I know I have seen overlapping borders done before, but I can’t remember how. I have an internal web based application for our users. For internal apps we support only IE 6. I have two div classes, menu and content. An excerpt from the stylesheet is:
div.content {
padding: 0.75em;
margin: 0em;
text-align: left;
float: right;
width: 80%;
min-height: 500px;
border-left : thin groove Navy;
}

div.menu {
float: left;
margin: 0em;
width: 20%;
padding: 0.75em;
text-align: left;
border-right : thin groove Navy;
}

Because the content is dynamic I won’t necessarily know which div will have the greater height. I need a border between the two divs that is the same height as the tallest div. I thought the easiest way was to have overlapping borders, so two borders would appear as one, but can’t get it to work.

Any suggestions?

2

I’m not sure about this, but how about set one to “margin-left: -1px;” or margin-right, depends on the position.

3

Hi,

Negative margins are the way to go as possibility mentioned but you need to take into account padding and borders stretching the element past the 100% mark.

I’ve taken the padding out and used a negative margin to accomodate the extra width of the borders and also a negative margin to make the overlap. (And i reduced one element by a fraction of a percent to avoid ie’s rounding bug. You can adding padding back on an inner element if you need to)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.content {
margin: 0em;
text-align: left;
float: left;
width: 79.9%;
min-height: 500px;
border-left : 2px groove Navy;
margin-right:-4px;
margin-left:-2px;
}
* html div.content {height:500px}
div.menu {
float: left;
margin: 0em;
width: 20%;
text-align: left;
border-right : 2px groove Navy;
}
</style>
</head>
<body>
<div class="menu">Menu</div>
<div class="content">Content</div>
</body>
</html>

Hope that helps.

Paul

4

Worked like a charm!

All of the personalities thank you :slight_smile:

5

hi there,

I have got a similar problem. I am trying to bulild a website out of boxes(just small tables), now these are my templates.

then I reffer each table to this CSS


 .borderTBLR {
 	border: 1px solid #999999;
 }

Now I see the borders overlapping eachother and the border seems to be 2px instead of 1px.

I have tried


  .borderTBLR {
  	border: 1px solid #999999;
 margin: -1px;
  }

Any other suggestion?

6

HI,

Not quite sure what you mean but if you have the elements underneath each other then the top and bottom borders will be next to each other and will give you 2px borders. Just set the class to have border-bottom:none and then add a class to the last one in sequence and apply a border to it.

Not sure if that’s what you mean so a working example may be required :slight_smile:

(Sorry for the late reply but I’ve been away on holiday)