CODEWITHSUNDEEP
htmlcsslayout
saad.sawash
saad.sawash

Reputation: 231

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>

Upvotes: 0

Views: 348

Answers (1)

Nick Ribal
Nick Ribal

Reputation: 2109

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>

Upvotes: 1

Related Questions