CODEWITHSUNDEEP
htmlcss
Bob Hope
Bob Hope

Reputation: 11

Chrome inspector not showing body outline correctly

so I'm working on just practice with HTML and CSS, trying to start building some skills. I am working on creating just a simple layout of a "blog" site with a top nav, body that has a left and right side, and a footer. Currently it is displayed how I want it but when I look in the inspector and hover over the body tag to see it's outline it is showing a height of only 20px and it is not taking up the whole page like it normally should.

(I just noticed as well that it is doing it for my "body-content" class too, shouldn't it outline both the "main-content" and "right-side-content" when hover over "body-content" in the inspector?

I'm worried that this is pointing out an error I don't notice and could have consequences on future styling.

I'm including the html and my stylesheet

body {
  width: 80%;
  margin: 0 auto;
}
.body-content {
  display: inline;
  width: 100%;
}
.main-content {
  display: inline-block;
  float: left;
  width: 50%;
}
.main-content p {
  text-align: left;
}
.right-side-content {
  display: inline-block;
  margin-top: 50px;
  float: right;
  width: 20%;
}
.right-side-content p {
  text-align: center;
}
.bottom-content {
  width: 100%;
  float: left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>The Dudest Blog Around Man</title>
  <link rel='stylesheet' href='css/styles.css' />
</head>

<body>
  <div class='core'>
    <div class='top-content'>
      <div id='site-banner'>
      </div>
      <div class='navigation-area'>
        <nav id='main-navigation'>
          <a href='#'>Home</a>
          <a href='#'>Bands</a>
          <a href='#'>Reviews</a>
          <a href='#'>Contact</a>
        </nav>
      </div>
    </div>
    <div class='body-content'>
      <div class='main-content'>
        <article class='article'>
          <h1 class='article-title'>Post Apocalyptic Decline</h1>
          <h6 class='article-creation-date'>4/14/14 12:51pm</h6>
          <p class='article-main-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
            Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
            metus varius laoreet.</p>
        </article>
        <article>
          <h1 class='article-title'>Can We Recover?</h1>
          <h6 class='article-creation-date'>4/14/14 12:51pm</h6>
          <p class='article-main-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
            Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
            metus varius laoreet.</p>
        </article>
      </div>
      <div class='right-side-content'>
        <div class='current-give-away'>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit,</p>
        </div>
        <div class='next-week-on'>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit,</p>
        </div>
      </div>
    </div>
    <div class='bottom-content'>
      <footer id='footer'>
        <a href='#'>Legal</a>
        <a href='#'>Contribute</a>
        <p id='copyright'>Copyright 2014 EW</p>
      </footer>
    </div>
    </dvi>
</body>

</html>

Upvotes: 0

Views: 87

Answers (1)

TMan
TMan

Reputation: 1905

The body tag doesn't necessarily fill the screen automatically - it will size itself according to the content contained unless you size it explicitly.

If you want it to stretch the full screen, add the following to your CSS:

html {
  height: 100%;
}

body {
  height: 100%;
}

The reason the elements are not being highlighted when you have the body tag selected is because you are using display: inline and display: inline-block which changes the rules with respect to rendering and what the browser thinks belongs where :-)

Upvotes: 1

Related Questions