I want to have a box within a box within a box; a border within a border within a border using divs. If you can see what I'm doing wrong please help. It would really be appreciated.

Here is my html:

<!DOCTYPE html>
<html>

 <link rel="stylesheet" type="text/css" href="divReference.css">
 <body>
 <div class="box">
   <div class="TopContainer">
      <div class="Container1">
      </div>
      <div class="Container2">
      </div>
      <div class="Container3">
      </div>
      <div class="Container4">
      </div>
   </div>
 </div>  
 </body> 
</html>

Here is my css:

<style>
.box {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 4px red;
  margin: 15px;
}
.TopContainer {
    border:12px green;
    padding: 5em;
    position: relative;
}
.Container1{
    border:4px solid black;
    padding: 1em;
}
.Container2{
    border:4px solid black;
    padding: 1em;
}
.Container3{
    border:4px solid black;
    padding: 1em;
}
.Container4{
    border:4px solid black;
    padding: 1em;
}

</style>

Not sure what you're trying to achieve, but:
1. Loose the styles tags in the css-file.
2. The border property for box and TopContainer does not have an attribute such as solid or dashed..

.box {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 4px solid red;
  margin: 15px;
}
.TopContainer {
    border:12px solid green;
    padding: 5em;
    position: relative;
}
.Container1{
    border:4px solid black;
    padding: 1em;
}
.Container2{
    border:4px solid black;
    padding: 1em;
}
.Container3{
    border:4px solid black;
    padding: 1em;
}
.Container4{
    border:4px solid black;
    padding: 1em;
}

no type='text/css' or type='text/javascript' in html5

external stylesheets do not have <style> or </style> they just contain css

.container1 - .container4 are identical, all .container? divs = .container
classes can be re-used;

left out required keyword solid, in topcontainer and box

.box is fixed size, all other elements are relative,
padding of 5em, and 1em
5em top+left+right+bottom + 1em top+left+right+bottom
12 em in both horizontal and vertical dimensions

given a standard plasma display 267pixel/inch on my laptop, tablet, or phone
an em for me is 1/6 inch, so I don't have to use reading glasses
12 em is 2 inch,
included padding is 2 inches high and wide
.box is 1.12 inch wide and .75 inch high

99.9999999999% (everybody except you)
the .container elements will NOT nest inside .box, all elements should be relative dimensioned; em rem %

.box {width:300px;height:200px;padding:10px;border:4px red solid;margin:5px;}
.TopContainer {border:12px green solid;padding:5em;position:relative;}
.Container {border:4px solid black;padding:1em;}

Not sure what is intended by position:relative; in .topcontainer, there are no offsets set so it does nothing
if there is no requirement for .box to be small

  .box {padding:10px;border:4px red solid;margin:5px;}

and if you put some content, in any of the divs,
well just try it

<!DOCTYPE html>
<html>
 <link rel="stylesheet" href="divReference.css">
 <body>
body<div class="box">
   body<div class="TopContainer">
      topcontainer<div class="Container">
      content1</div>
      <div class="Container">
      content2</div>
      <div class="Container">
      content3</div>
      <div class="Container">
      content4</div>
   </div>
 </div> </body> 
</html>

with fixed size .box NOTHING fits

Hi,

At the moment they are stacked on top of each other rather then "within"
Is this what you are looking for

<div class="box">
   <div class="TopContainer">
    <div class="Container1">
      <div class="Container2">
        <div class="Container3">
            <div class="Container4"></div>
        </div>
      </div>
   </div>   
  </div>
 </div>  
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.