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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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...
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 ?
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.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
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...)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.