CODEWITHSUNDEEP
htmlcss
user3760941
user3760941

Reputation: 528

Why aren't these divs sizing correctly?

I cannot get divs '2nd_a' '2nd_b' and '2nd_c' (inside the 'second_area' div) to resize properly. I really don't understand this because they are supposed to be 160px high and 160px wide boxes, and they're just not resizing. Also if I take the text inside the divs away, they disappear. I've tried displaying them as inline blocks but to no avail. Can anyone please help explain why this is happening?

@charset "utf-8";
/* CSS Document */
body{
	background-color:#fff;	
	padding:0px;
	margin:0 auto;
}

#header-wrap{
	width:100%;
	height:100px;
	margin: 0 auto;
	background:#BABABA;
	border-bottom: 1px solid #211c20;
	border-top: 1px solid #211c20;
}

#header{
    width:960px;
    height:auto;
    margin: 0 auto;
    padding-top:15px;
}

.logo{
    width:130px;
    height:50px;
    border:1px solid black;
    padding-top:20px;
    padding-left:50px;
    font-size:24px;
    float:left;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

.links{
    float:left;
    height:50px;
    width:778px;
    font-size:24px;
	padding-top:20px;
	text-align:right;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#main_body{
	background:#2A00FF;
	width:960px;
	height:auto;
	margin:0 auto;
}
#first_area{
	width:960px;
	height:auto;
	margin:0 auto;
	background:#E000FF;
	padding-top:150px;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:33px;
	text-align:center;
	padding-bottom:150px;
}
#second_area{
	width:960px;
	height:auto;
	background:#22FF00;
}
#2nd_a{
	width:158px;
	height:158px;
	border:1px solid black;
	float:left;
	background:#983C3D;
}
#2nd_b{
	width:158px;
	height:158px;
	border:1px solid black;
	float:left;
	background:#FFCE00;
}
#2nd_c{
	width:158px;
	height:158px;
	border:1px solid black;
	float:left;
	background:#C11FFF;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href ="style.css" rel="stylesheet" type="text/css"/>
<title>Untitled Document</title>
</head>

<body>



<div id="header-wrap">

<div id="header">
<div class="logo">LOGO</div>
<div class="links">VENDING MACHINES | DISTRIBUTORS | SUPPORT | CONTACT</div>
</div>
</div>

<div id="main_body">

<div id="first_area">excellent vending services</div>
<div id="second_area">

<div id="2nd_a">a</div>
<div id="2nd_b">b</div>
<div id="2nd_c">c</div>

</div>

</div>
      

</body>
</html>

Upvotes: 2

Views: 63

Answers (2)

CapeStar
CapeStar

Reputation: 147

Here is fiddle. remove "2" from id name. Like

#nd_a

Upvotes: 2

Stefan Korn
Stefan Korn

Reputation: 166

The issue is about the ID starting with a number. While you can use a number for starting an id in HTML5, there is still something to consider in CSS. You would need to escape the id selector like this in your CSS file:

#\32nd_a {
styles go here
}

For more details refer here: can i have a div with id as number?

Upvotes: 0

Related Questions