Question 197987 in Html Question posted in
Some basic documentation can be found here.

Html – Why does the box not show up in div?

I am new to javascript, CSS, HTML and programming in general. Though I am new I feel that I have a decent grasp of simple HTML and CSS. Previously I have successfully made a div inside a div, but all of a sudden the second div does not show up. The text shows up, but nothing else.
webview
This is my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
        <h2>Welcome</h2>
        <div class="background">
          <div class="foreground">foreground</div>
        </div>

    <style>
      .background {
        width: 300px;
        height: 300px;
        background-color: red;
      };
      .foreground {
        width: 100px;
        height: 100px;
        background-color: blue;
      };
    </style>
  </body>
</html>

This may be related to another wierd problem I am having, where elements are draggable, even if I have not set them to be.

I have tried reloading the program and restarting my computer, but nothing changes. I have also made multiple different documents to see if it was an issue with the specific document I was working on.

Tags:

3

Answers


  1. 0

    You are adding a semi-colon ; after your css closing braces, which is not supposed to be, just them them out and your css should run just fine.

    Example:

    <style>
  .background {
    width: 300px;
    height: 300px;
    background-color: red;
  }
  .foreground {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>

    Also, it’s usually best practice to put your <style> inside your <head> tag in your code.

    Login or Signup to reply.
  2. 0

    Here is the solution. Just follow these:

    1. Put the "style" tags within the "head" tags.
    2. Remove the semi-colon after each CSS rule (after the end of the curly brackets)
    3. Close the "main" tag
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <style>
        .background {
          width: 300px;
          height: 300px;
          background-color: red;
        }
        
        .foreground {
          width: 100px;
          height: 100px;
          background-color: blue;
        }
    </style>
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
        <h2>Welcome</h2>
        <div class="background">
          <div class="foreground">foreground</div>
        </div>
    </main>
  </body>
</html>
    Login or Signup to reply.
  3. 0

    style tags should be in the head section and delete semicolons at the end of the brackets.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search