Member Avatar for Dmitriy78

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>
  • 4 Contributors
  • 3 Replies
  • 207 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by donz365
Member Avatar for Sugmuffen

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;
}
Member Avatar for almostbob

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

Edited by almostbob
Member Avatar for donz365

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.