Inspect element problem

When I tried to hover my #header div when I try using inspect element from google chrome like from div id=header it doesn’t highlight.

Here is the site: Click me

It is supposed to have also a blue highlight like this example:

#header div

Thank you.

Your question was very confusing until I looked at your page.

The reason it does not highlight blue (aka it has 0 height) is because the floated children (logo and the other div) make the parent not realize they are there. #header div{} needs to have overflow:hidden;

No floats to clear?


<div style="clear: both;"></div>

instead of


If I understand correctly, you are not reporting a problem with the page, you are reporting that Chrome’s inspector does not highlight the logos blue.

(1) First, you need to make some corrections to your HTML.
(a) All foreground images (those in the HTML) should have these attributes completed: width=“” height=“” alt=“” . The alt attribute is required, the width and height attributes are a very good idea (that’s more than just casual).
(b) The google analytics script should NOT be below the </html> tag. It should precede the </body> tag. Nothing should follow the </html> tag.
Your HTML should look something like this:

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Rj Enterprises</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="css/ie8.css">
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie7.css">
    <!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="css/ie6.css">

<div id="header">
    <div> <!-- first -->
        <div id="logo"> <!-- second -->
            <a href="#"><img src="images/logo.png" width="324" height="56" alt="Rj Enterprises logo"></a>
        <div> <!-- second -->
            <div> <!-- third -->
                <a href=""><img src="images/fb.png" width="34" height="35" alt="facebook logo"></a>
                <a href=""><img src="images/tw.png" width="34" height="35" alt="twitter logo"></a>
                <a href="#"><img src="images/insta.png" width="34" height="35" alt="instagram logo"></a>
            <form action="#">
                <input type="text" id="search" maxlength="30" placeholder="search">
                <input type="submit" value id="searchbtn">
        </div> <!-- second -->
    </div> <!-- first -->
</div> <!-- header -->

<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src=""></script>
<!-- End Of Analytics Code -->

(2) #header does not need {overflow:hidden} because none of its children are floating. However, as @RyanReese said, #header div does need {overflow:hidden} because both of its children are floating. That plus a few more changes and your CSS should look like this:

* {

body {
    background:url(../images/bg-body.png) repeat-y top center;

#header {
    border-bottom:1px solid #fff;
    padding:36px 0 0;

#header > div {
    margin:0 auto;

#header > div div {

#header > div div#logo {

#header > div > div div {

img {

a {

Now you should find that Chrome highlights the logo fully and the code tests valid in the HTML Validator

I already fixed it but I got another one with my search form and ul list navigation

Did you copy my code and try it? It not, please do. If yes, what were the results?

Please check my site, I already did follow your code and fully highlights already but I did proceed my code and got a problem from my nav and search form

My website

Your issues are very simple, but you are adding to them instead of fixing them as you go along. The HTML still has problems and your CSS methodology could use some educated improvements. I’m sure you are just in a hurry… impatient.

Someone else will be along to help you. I am not interested in dancing out of step today.

Is it with the clear floats?