Alex Vasile Alex Vasile - 5 months ago 19
CSS Question

Make a div a square in CSS

How do I make those box divs look like a little box or a square? I set

#header
width and height and on those it doesn't work.

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>A Page</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet" />


</head>
<body>
<div id="header">
<div id="search">
<form>
<div id="box" class="text">
<input type="text" placeholder="Search" />
</div>
<div id="box" class="small">
<input type="image" src="" alt="submit" />
</div>
</form>
</div>

<div id="menu">
<a href=""><div id="box" class="big"></div></a>
<a><div id="box" class="small"><img></img></div></a>
<a><div id="box" class="small"><img></img></div></a>
<span id="notifications"></span>
</div>
</div>

<br />

<div id="box" class="big">

</div>


CSS:

body{
font-family: 'Prompt', sans-serif;
background: #707070;
}

#header{
background: #e2ecf2;
opacity: 0.87;
border-radius: 30px;
height: 60px;
width: 1000px;
position: fixed;
left: 50%;
top: 25px;
transform: translateX(-50%);
}

#box{
outline: 3px;
outline-style: solid;
outline-color: #d7d7d7;
}

#box .small{
width: 35px;
height: 35px;
}

#box .big{
width: 50px;
height: 50px;
}

#header #search{
margin-left: 37px;
}

#header #search input{
float: left;
margin-left: 20px;
}

Answer

In your CSS you specified the style

#box .small

This style is applied to an element within #box that has the class "small" - for example like this:

<div id="box"><span class="small"></span></div>

remove the space between and it will apply to the element #box with the class "small"

#box.small

A good tool to see whats wrong is the developer console in your browser. That should be able to show you which styles are applied to an element at runtime.

Also be aware that IDs can be used the way you do, but I would not recommend using the same ID multiple times as it should be unique ideally. You could use another class instead and apply the style like this:

div.box.small
Comments