CODEWITHSUNDEEP
htmlcss
John Bessire
John Bessire

Reputation: 571

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>

Upvotes: 0

Views: 96

Answers (1)

the_lost_one
the_lost_one

Reputation: 127

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

Upvotes: 1

Related Questions