my square is not appearing as a square but taking up the length of the screen-CodePudding

I have recently tried to code a square in code ply but its not working.

HTML
<body>
<div >
red
</body>


CSS
  .div { 
   height: 100px;
   width: 100px;
   border: 1px solid; 

 .red {
    background-color : red;
    }

it's taking up the whole screen in length

can some one help me?

just tried to do it in code ply again and it's not working at all. confused.

CodePudding user response：

You almost got it, just pay attention to the class you use in your div element. Here I fixed it for you.

.red {
  height: 100px;
  width: 100px;
  border: 1px solid;
  display: block;
  background-color: red;
}

<body>
  <div >
    red
  </div>
</body>

CodePudding user response：

The div is an element, not a class. It should be like this:

div { /*div is not a class, but an element, so it should be addressed without a . in front of it*/
   height: 100px;
   width: 100px;
   border: 1px solid; 
   } /*closing curly bracket was missing here*/

 .red {
    background-color: red;
    }

<body>
<div >
red
</div> <!-- this was also missing-->
</body>

CodePudding user response：

It looks like you forgot to close your <div> tag.

Change your html to:

<body>
  <div > red </div>
</body>

Looking at your css, you have implied that there is a class called "div" and a class called "red". You have a <div> element with the class "red".

Change your css to:

 div { 
   height: 100px;
   width: 100px;
   border: 1px solid; 
 }

.red {
    background-color : red;
}