CSS and HTML

Question

Hello everyone,
I’m trying to make HTML coded resume in which I was trying to have boxs so I have created a div in which there is two different div but the they are overlapping I want to have them on left and right both are at left 0px; I have created I’d for them so will directly mention code with id below
Code I have been using for css is
#main {
Height 650px;
Width 500px;
Background colour red;
Border 2px solid black;}
#box1
{Height 100px;
Width 200px;
Background colour blue;}
#box2{Height 200px;
Width 300px;
Background colour yellow ;}
I have not used inline property and display flex is also not working
Anyone can help on this ?

Answer 1

First, you need colon (":") as separator between properties names and values.

Second, you need a dash ("-") as joiner between words composing a property name, and third the correct spell of background colour property name is "background-color" (with the dash and without the "u")...

And finally, your code will be much readable and pleasant if you format it a minimal (indentation, common conventions: css is case insensitive, but mostly everybody write property names all lowercase ;)

#main {
height: 650px;
wodth: 500px;
background-color: red;
border: 2px solid black;
}
#box1 {
height: 100px;
width: 200px;
background-color: blue;
}
#box2 {
height: 200px;
width: 300px;
background-color: yellow;
}

/* debug styles */

#main { outline: 5px dashed darkred; }
#box1 { outline: 5px dashed deepskyblue; }
#box2 { outline: 5px dashed gold; }

(I've added some "debug styles" to improve your comprehension of what you're doing: outline, unlike border, doesnt change elements)