div doesn't appear with the appropriate css style

Question

I cannot understand why the following div does not appear in the page with the style I have given it in style.css . The header appears just fine, the problem is in the div with id="navigate"

<div id="navigate">
    <h5>Hello</h5>
</div>

which considering the CSS I have used I have expected it to be of width 100%, with a height of 200px and red background but instead only the word "Hello" appears.

#navigate {
      height: 200px;
      width: 100%;
      background-color:red;
    }

I post the whole code in case it gives a clue

CSS

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; /*vertical-align: baseline;*/ } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ~~~~~~~~ Global ~~~~~~~~ */ .container { /*class*/ background: #35424a; width: 70%; /*In order to be responsive we will use percentage*/ height: 50px; margin: auto; /*This will move it to the middle wow wow wow*/ overflow: hidden; /*if something goes outside of a div i don't want a scrollbar to appear, i want it to be hidden*/ } /* ~~~~~~~~ Header ~~~~~~~~~~*/ header { position: inherit; color: #ffffff; /* color of text */ min-height: 30px; /*min-height instead of height, that way when it's responsive and the screen is smaller and the text grow or the menu goes in the next line we want the high to adjust*/ } header a { display: table-cell; vertical-align: middle; float: left; padding-top: 5px; } header form { float: left; vertical-align: middle; padding-top: 10px; padding-left: 5px; } #nav-search { text-align: center; width: 150px; height: 30px; } header .info { display: table-cell; padding-left: 100px; padding-top: 20px; } header h5 { display: table-cell; padding-left: 20px; } header .btn-success { float: right; top: 50%; transform: translateY(-80%); margin-left: 5px; } /* ~~~~~~~~ Navigate ~~~~~~~~~~*/ #navigate { height: 200px; width: 100%; background-color: red; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="description" content="Test site"> <meta name="keywords" content="test, site, whatever"> <meta name="author" content="Sonam1790"> <title>Elite Properties</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <header> <div class="container"> <a href="index.html" class="logo"> <img src="CSS/small_logo.png" alt="Test Site" /> </a> <form method="GET" action="index.php"> <input id="nav-search" type="text" name="search" placeholder="Search" /> </form> <div class="info"> <h5>tel: 123456789</h5> <h5>fax: +090 44 12943</h5> <h5>email: sonam1790@gmail.com</h5> </div> <button type="button" class="btn-success">Register</button> <button type="button" class="btn-success">Sign in</button> </div> </header> <div id="navigate"> <h5>Hello</h5> </div> <footer> <p>Test site, Copyright &copy; 2017</p> </footer> </body>

Answer 1

Your h5 style will override the div style in the code you posted. One easy solution is to specify an h5 style for the #navigate div:

#navigate h5 {
      height: 200px;
      width: 100%;
      background-color:red;
    }

div doesn't appear with the appropriate css style

Question

1 answers

solution1
0 2017-10-13 22:23:43

div doesn't appear with the appropriate css style

Question

1 answers

solution1 0 2017-10-13 22:23:43

solution1
0 2017-10-13 22:23:43