Why aren't these divs sizing correctly?

Question

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>

I don't see anything in your code that specifies that they be 160px. — durbnpoisn, Feb 03 '16 at 16:17
Don't start the IDs with a number. While legal, it often causes issues with CSS. For example, change `id="2nd_a"` to `id="second_a"` and update your CSS. https://jsfiddle.net/1p9jov9t/ — j08691, Feb 03 '16 at 16:17
Don't start the IDs with a number. http://stackoverflow.com/a/449000/5297072 — Douglas Araujo, Feb 03 '16 at 16:22

score 2 · Answer 1 · answered Feb 03 '16 at 16:24

2

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

#nd_a

answered Feb 03 '16 at 16:24

CapeStar

147
9

Hi, working fiddle while keeping the id name and escaping the id in CSS: https://jsfiddle.net/brruLjy7/2/ – Stefan Korn Feb 03 '16 at 16:29
I think you need to put 3 before 2 in the fiddle. From my point of view, its better to use chars only in the naming. – CapeStar Feb 03 '16 at 16:37
1

Yes, you are right: https://jsfiddle.net/brruLjy7/4/ - and I agree that it is handier to use no number for starting. But maybe if for some reason you are bound to a number the escaping could be an option. – Stefan Korn Feb 03 '16 at 17:01

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

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?

edited May 23 '17 at 10:28

Community

1
1

answered Feb 03 '16 at 16:24

Stefan Korn

166
2
6

Why aren't these divs sizing correctly?

2 Answers2