John Bessire John Bessire - 6 months ago 31
HTML Question

HTML Nested Divs inside Nested Div not displaying when using CSS class

The following code has a Div that contains four smaller Divs in a row. Each of the four Divs also contains a smaller Div but this Div is not displaying. I tried various combinations of display and position to see if the div would show up. There appears to be something wrong in classGoalSelected.

<html>

<head>

<style type="text/css">

#goalSelectionContainer {

width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}

.classGoalSelection {
background: grey;
height: 100px;
width: 100px;
position: relative;
display:inline-block;
margin: 10px;
}
}

.classGoalSelected {
background-color:green;
width:25px;
height:25px;
position: relative;
display:inline-block

}

</style>

</head>

<body>

<div id = "goalSelectionContainer" >
<div id = "goalSelectHome" class = "classGoalSelection">Home

<div id = "goalSelectedHome" class = "classGoalSelected">
</div>


</div>

<div id = "goalSelectRetire" class = "classGoalSelection">Retirement

<div id = "goalSelectedRetire" class = "classGoalSelected">
</div>

</div>

<div id = "goalSelectCollege" class = "classGoalSelection">College

<div id = "goalSelectedCollege" class = "classGoalSelected">
</div>
</div>

<div id = "goalSelectOther" class = "classGoalSelection">Other

<div id = "goalSelectedOther" class = "classGoalSelected">
</div>

</div>

</div>



</body>

</html>


Using this line of code

<div style="background-color:green; width:50%; height:50px;display:inline-block;"> </div>


instead of this code with the class will cause the Div to appear.

<div id = "goalSelectedHome" class = "classGoalSelected"></div>

Answer

That's cause you've got an extra '}' in your css. Happens to the best of us

 .classGoalSelection {
            background: grey;
            height: 100px;
            width: 100px;
            position: relative;
            display:inline-block;
            margin: 10px;              
        }

This should work !!