Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Div containers with overlapping borders

Posted on 2006-03-29
8
Medium Priority
?
764 Views
Last Modified: 2012-05-05
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;
}
0
Comment
Question by:nmretd
6 Comments
 
LVL 18

Expert Comment

by:bruno
ID: 16326641
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
 

Author Comment

by:nmretd
ID: 16326791
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
 
LVL 11

Expert Comment

by:siliconbrit
ID: 16328206

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 11

Accepted Solution

by:
siliconbrit earned 172 total points
ID: 16328214

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
 
LVL 18

Assisted Solution

by:bruno
bruno earned 164 total points
ID: 16338143
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
 
LVL 25

Assisted Solution

by:kevp75
kevp75 earned 164 total points
ID: 16346460
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question