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
  • 218 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by donz365

Dani AI

Generated

Short summary and quick fixes: the thread already spotted the main problems — missing border style, putting <style> tags inside an external stylesheet, and using large em padding inside a small fixed box. fixed the border shorthand, reminded you to reuse classes and watch unit math, and correctly showed the difference between stacked siblings and nested elements. Two practical ways to get “a box inside a box inside a box” are below: one that uses pseudo-elements (no extra markup) and one that uses small, reusable nested layers.

A compact single-element approach (pseudo-elements) — keeps HTML minimal, predictable sizing, and avoids overflow:

.box {
  --pad: 12px;
  width: 300px;
  height: 200px;
  box-sizing: border-box;
  padding: var(--pad);
  border: 4px solid #c33;   /* outer border */
  position: relative;       /* required for ::before/::after */
  background: #fff;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  left: calc(var(--pad) + 4px);
  right: calc(var(--pad) + 4px);
  top: calc(var(--pad) + 4px);
  bottom: calc(var(--pad) + 4px);
  pointer-events: none;
  border: 4px solid #3a3;
  box-sizing: border-box;
}

.box::after {
  left: calc(var(--pad) + 20px);
  right: calc(var(--pad) + 20px);
  top: calc(var(--pad) + 20px);
  bottom: calc(var(--pad) + 20px);
  border-color: #333;
}

A reusable nested-layer pattern — easy to scale and clear to read in the DOM:

/* markup:
<div class="box">
  <div class="layer layer--green">
    <div class="layer layer--black">content</div>
  </div>
</div>
*/

.box { width: 300px; box-sizing: border-box; border: 4px solid #c33; padding: 8px; }
.layer { box-sizing: border-box; padding: 8px; border: 4px solid; }
.layer--green { border-color: #3a3; }
.layer--black { border-color: #333; }

Troubleshooting notes: use box-sizing: border-box to make width/height include padding and border (easier math). If you keep a fixed size, avoid large em padding — 5em can easily overflow a small fixed box. External CSS files must contain raw CSS (no <style> tags). Use DevTools to inspect the computed box model and watch the summed values: for content-box a 300px width minus 2×padding and 2×border reduces available inner space.

Recommended Answers

All 3 Replies

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.