Div containers with overlapping borders

I am trying to construct a template with div containers. In the following example the inner containers are not overlapping the outer container and are thus causing a thick border line. How can I correct this so that I have a consistent 1px border.

<HTML>
<HEAD>
 <TITLE>Using a DIV as a container for positioned objects</TITLE>
 <link href="styles.css" type="text/css" rel="stylesheet">
</HEAD>

<BODY BGCOLOR=#FFFFFF>

<div class="float1">
      <p>Hello</p>
</div>

<div class="float2">
      <div class="float3">
            <p>World</p>
      </div>
</div>


</BODY>
</HTML>


Style Sheet

BODY
{
  text-align: center
}
 
div.float1
{
  margin:0px auto;
  text-align:left;
  width:550px;
  height:60px;
  border:1px solid gray;
  padding:0px;
}

div.float2
{
  margin:0px auto;
  text-align:left;
  width:550px;
  height:250px;
  border:1px solid gray;
  padding:0px;
}

div.float3
{
  position:relative;
  padding: 0px;
  left: 0px;
  width:120px;
  height:250px;
  border:1px solid gray;
  padding:0px;
}

p
{
  padding: 10px;
  text-align: left;
  color: black;
  font-family: verdana;
  font-size: 11px;
}
nmretdAsked:
Who is Participating?
 
siliconbritCommented:

Oh, and I note that Bruno also mentioned not drawing a border on the internal div, so if you choose this as your solution then the points should go to him.
0
 
brunoCommented:
an inner container will not overlap an outer container - it's inside!

just remove the border on your inner container and use the border on the outer...
0
 
nmretdAuthor Commented:
Don't think this will work as I need the borders to show the seperate sections of my template. Is there another way around this ?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
siliconbritCommented:

Bruno is almost correct about the div within a div, but you *can* hack the position of the div using negative numbers, for example note the values in the following for left and top.

div.float3 {
      position:relative;
      padding: 0px;
      left: -5px;
      top: -5px;
      width:120px;
      height:250px;
      border:1px solid gray;
      padding:0px;
}

I've exagerrated the position so you can see it's effect.

The problem with this is that different browsers will render your 'pixel perfect' layout differently, so you wont always get the results you expect.

The correct approach would probably be one of:

   - Stop nesting the divs and layer them instead using Z-index values.
   - Don't draw a border on the internal div.
   - Re-plan your layout.
0
 
brunoCommented:
you can jsut get rid of the top and left border in float3


div.float3
{
  position:relative;
  padding: 0px;
  left: 0px;
  width:120px;
  height:250px;
  border:1px solid gray;
  border-top: 0;
  border-left: 0;
  padding:0px;
}

siliconbrit gave you a few other options - z-index to put one layer on top of the other, or position to move the divs around a bit.


bruno
0
 
kevp75Commented:
you can also do this by setting:

position:absolute;z-index:0; /*on the first div*/
position:absolute;z-index:1;/*on the second div*/

experiment with the z-index, and your position (ie....top:250px;left:250px;, etc...)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.