Saad Al-Sabbagh Saad Al-Sabbagh - 12 days ago 7
CSS Question

Content overflowing from <header> and height not being set on <div's>

I've got a single header with 70% height, and 5 divs each representing a different section in the page. The

<header>
element is getting the height property and working as expected, the div elements however won't when setting the height to any percentage value.

I've looked around and apparently I need to setup the root elements height, I did height: 100% on html and body and everything worked as expected; however the header which was responsive now isn't. Whatever is in the header is getting overflowed and out of the container.



/* === GLOBAL === */
* {
box-sizing: border-box;
}

body {
font-family: "Lato", sans-serif;

height: 100%; /* EXPERIMENTAL */
}

/* === HEADER === */
header {
height: 70%;

background-color: #bdc3c7;
}

header h1 { /* The Heading "Saad Al-Sabbagh" */
margin: 0;

font-family: "PT Sans Narrow";
text-align: center;
padding-top: 2em;
}

header p a { /* The Link Inside The Description Paragraph */
text-decoration: none;
color: #3498db;
}

header p a:hover { /* The Link Inside The Description Paragraphs Hover Effect */
color: #d35400;
border-bottom: 3px solid #d35400;
}

header p { /* The Description Paragraph */
text-align: center;
font-size: 3rem;
padding-top: .3em;
font-weight: 700;
}

header ul { /* The Social Links List */
list-style: none;
text-align: center;
}

header ul li { /* The Social Links List Items */
display: inline-block;
font-size: 5em;
padding: 1em .5em;
}

header ul li a { /* The Social Links */
text-decoration: none;
color: black;
}

header ul li a:hover { /* The Social Links On Hover */
color: #d35400;
}

/* === ABOUT === */
#about {
height: 100;
}

<!DOCTYPE html>
<html>

<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Title -->
<title>Saad Al-Sabbagh | Web Developer</title>

<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900|PT+Sans+Narrow">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
</head>

<body>

<!-- Header -->
<header>
<h1>Saad Al-Sabbagh</h1>
<p>Front End Web Developer, <br>Educator and Author <br>@ <a href="#">SitePoint</a></p>
<ul>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</header>

<!-- About -->
<div id="about">

</div>

<!-- Expertise -->
<div id="expertise">

</div>

<!-- Recent Works -->
<div id="recent-works">

</div>

<!-- Latest Blog Post -->
<div id="latest-blog-post">

</div>

<!-- Contact -->
<div id="contact">

</div>

<!-- Footer -->
<footer>

</footer>

</body>

</html>




Answer

You have a few issues in the example:

  1. A div will have 0 height when it is empty.
  2. A div will wrap its contents and not 'inflate' to fit its parent's height.
  3. Height has to have units, so your #about { height: 100; } won't work

I've corrected #1 and #3, but don't understand what exactly is the desired look you want to achieve.

/* === GLOBAL === */

* {
  box-sizing: border-box;
}
body {
  font-family: "Lato", sans-serif;
  height: 100%;
  /* EXPERIMENTAL */
}
/* === HEADER === */

header {
  height: 70%;
  background-color: #bdc3c7;
}
header h1 {
  /* The Heading "Saad Al-Sabbagh" */
  margin: 0;
  font-family: "PT Sans Narrow";
  text-align: center;
  padding-top: 2em;
}
header p a {
  /* The Link Inside The Description Paragraph */
  text-decoration: none;
  color: #3498db;
}
header p a:hover {
  /* The Link Inside The Description Paragraphs Hover Effect */
  color: #d35400;
  border-bottom: 3px solid #d35400;
}
header p {
  /* The Description Paragraph */
  text-align: center;
  font-size: 3rem;
  padding-top: .3em;
  font-weight: 700;
}
header ul {
  /* The Social Links List */
  list-style: none;
  text-align: center;
}
header ul li {
  /* The Social Links List Items */
  display: inline-block;
  font-size: 5em;
  padding: 1em .5em;
}
header ul li a {
  /* The Social Links */
  text-decoration: none;
  color: black;
}
header ul li a:hover {
  /* The Social Links On Hover */
  color: #d35400;
}
/* === ABOUT === */

#about {
  height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <!-- Meta -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Title -->
  <title>Saad Al-Sabbagh | Web Developer</title>
  <!-- CSS -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900|PT+Sans+Narrow">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <!-- Header -->
  <header>
    <h1>Saad Al-Sabbagh</h1>
    <p>Front End Web Developer,
      <br>Educator and Author
      <br>@ <a href="#">SitePoint</a>
    </p>
    <ul>
      <li>
        <a href="#" class="fa fa-facebook"></a>
      </li>
      <li>
        <a href="#" class="fa fa-twitter"></a>
      </li>
      <li>
        <a href="#" class="fa fa-linkedin"></a>
      </li>
    </ul>
  </header>
  <!-- About -->
  <div id="about">
    About
  </div>
  <!-- Expertise -->
  <div id="expertise">
    Expertise
  </div>
  <!-- Recent Works -->
  <div id="recent-works">
    Recent Works
  </div>
  <!-- Latest Blog Post -->
  <div id="latest-blog-post">
    Latest Blog Post
  </div>
  <!-- Contact -->
  <div id="contact">
    Contact
  </div>
  <!-- Footer -->
  <footer>
    Footer
  </footer>
</body>
</html>

Comments