Alex Vasile Alex Vasile - 1 year ago 103
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

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

<html lang="en">
<title>A Page</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link href="" rel="stylesheet" />

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

<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>

<br />

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



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

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

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 Source

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"


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:
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download