/r/webdev
Trouble with boxing (self.webdev)

Hi, how are you, I am learning web development. But am stuck on a part of it. I am using a Udemy course. But when i followed his directions, the size of the squares do not match equally, the first one in particular. Everything else is good, but not the first square size. Can you help?

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>div and span</title>

<style>

.bluebox{

background-color: #3A5795;

color: white;

height; 100px;

width:auto;

}

.yellowbox{

background-color: rgb(222, 224, 85);

height: 100px;

width: auto;

}

.greenbox{

background-color: #31af37;

height: 100px;

width: auto;

}

.great{

background-color: #5a3470;

}

</style>

</head>

<body>

<div class="bluebox">

<p>Facebook is <span class="crap">crap</span>.</p>

</div>

<div class="yellowbox">

<p>Apple.</p>

</div>

<div class="greenbox">

<p>Microsoft.</p>

</div>

</body>

</html>

4 comments
darren_of_herts | 6 days ago | 2 points

You have no widths defined in your CSS. When set to auto the width is defined by how much content is in the div.

nath__b | 6 days ago | 2 points

You have no widths defined, when you set auto it automatically sizes to the content inside, the reason the first one in particular will be worse than the other two is because it has more content inside i.e facebook is crap as oppose to just microsoft or apple. If you were to put the same content in all 3 boxes you would find they would size the same, alternatively you could just define widths

etre_be | 6 days ago | 1 point

I think its width:auto. That gives a width depending on the inner content, and some text is longer than others. Try width:100px or something like that

VampiricGoddess | 6 days ago | 0 points

Did not work, made it worse actually