Why isn't my div class.box displaying?

<DOCTYPE HTML>
  <html>
    
    <header><h1>wowzers a header</h1></header>
    
    <body>
      body
    <div class="box" </div>
    
    
    </body>
    
  </html>

<style>
.box
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  
  background-color: red;
  border-radius: 0px;
  box-shdaow: 10px 10px 10px 10px blue;
}
h1 {
  
  font-family: monospace, arial;
  
}
  body {
    background: #999;
    font-color: #ff1000;
}
</style>
<div class="box"></div>

Can you share your demo please?

1 Like

wrong property name “box-shaow:” please use “box-shadow”.
css has not “font-color” property. to change font color you should use “color: #ff1000;”

1 Like

@shimphillip attached demo

Capture

@yakhousam thank you for your input, Sir!

why isn’t my .box element appearing though?

try this code.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 0px;
        box-shadow: 10px 10px 10px 10px blue;
      }
      h1 {
        font-family: monospace, arial;
      }
      body {
        background: #999;
        color: #ff1000;
      }
    </style>
  </head>
  <body>
    <header>
        <h1>wowzers a header</h1>
    </header>
    body
    <div class="box"></div>
  </body>
</html>

1 Like

@yakhousam your code worked when i pasted the HTML & CSS into the HTML field on codepen, as opposed to having them split between the HTML & CSS fields.

i wonder why the red box wasn’t appearing with the code split? my understanding is that CSS & HTML should be separated for readability

if you assign an element position of absolute, you must assign its just parent a position of relative, here , body tag should be positioned relative!

1 Like

@IAmRC1

So a <div> element needs to be a child of a parent (<body>) element for CSS functions to apply to it?

what would the <body> be relative to, its' parent, <html>?

Lastly, should I just google how a <div> works?

i failed to add the div display type on the css side:

div {
display: block;
}

also, forgot to add the head opening/closing tags

When using absolute position on an element you usually want it to be positioned relative to a container. That container has to be position relative for this relationship to work.

https://codepen.io/anon/pen/arOQwW

CSS: position

relative

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.

absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

1 Like

@lasjorg your reply is helpful, especially with the multiple breakdowns, thank you.

glad to know about this…