Search code examples
csscss-position

The div with id 'intro' should be hidden but it shows. What has gone wrong?

The div with id="intro" is supposed to be hidden but it shows. The main container, which is div with "id=myQuiz", has width and height 650px and 'overflow' set to 'hidden'. Now, if the div with "class=intro" has margin 660px from the left, it should be hidden because it's margin is higher than the maximum width of the main container. My code is as follows:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test Your Knowledge: Saturn</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/quiz.css">
    </head>
    <body>
    <div id="myQuiz">

    <h1>Test your knowledge:<span>Saturn</span></h1>
    <div class="progress"></div>
    <div class="intro"></div>

    <h2>Welcome</h2>
    <p>Click begin to test your knowledge of Saturn</p>
    <p class="btn">Begin</p>
    <div class="question"></div>
    <div class="results"></div>
     </div>
     </body>
     </html>

CSS code is as follows:

    @import url(http://fonts.googleapis.com/css?                      family=Titillium+Web:900|Roboto:400,100);

   body { background-color: #fff; padding: 20px; }

   #myQuiz {
 font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
 width: 650px; height: 650px;
 position: relative;
 overflow: hidden;
 color: #fff;
 background: #000 url(../images/background.jpg) no-repeat 0px 0px;
}
#myQuiz h2 { font-size: 3em; margin: 0px; font-weight: 100;}
#myQuiz h3 { font-size: 2.4em; margin: 0px; font-weight: 100;}
#myQuiz p { margin: 0px 0px 40px 0px;}
#myQuiz .btn {
display: inline-block; cursor: pointer; background-color: #c04b01;
color: #fff; text-decoration: none;
padding: 5px 15px; border-radius: 6px;
}

#myQuiz .intro { position: absolute; top:225px; left: 660px; width: 550px;}
#myQuiz .intro p { margin: 0px 0px 40px 0px; }

Here is the link to my code on jsfiddle.net:

https://jsfiddle.net/h02y8usu/

Solution

  • You should hide the <div class="intro"> by adding display: none property to .intro