CODEWITHSUNDEEP
htmlcss
Jacob Johnson
Jacob Johnson

Reputation: 581

divs/footer ignoring other divs existence

I can't wrap my head around this one. I've been working on it for a bit but everything I try and everything I read fails to truly fix the problem.

Problem 1:

My div ".page" is ignoring all of its children divs. Setting it to 100% height and the background color to red for testing results in it only acknowledging certain divs (the .image__header div and the footer). I have set the html and body to width and height 100%; however, this does not resolve the problem.

Problem 2:

This leads to my second problem which would probably be solved by the prior problems solution. Adding the footer and setting a height and background color places the footer directly below the .image__header div. This emphasizes my belief that the other sections (main and nav) are being completely ignored as if they aren't even taking up space (nav is a fixed element glued to the top of my page and main doesn't work even if I change it to a div and "display:block" as it should be innately anyway).

My footer should simply fall below the main section but it fails to acknowledge main's existence.

A couple snippets of code although I have linked the brief CodePen at the bottom.

/*
 * font-family: 'Unica One', cursive;
 * font-family: 'Vollkorn', serif;
 */

body, html {
  width: 100%;
  min-height: 100% !important;
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  height: 70px;
  background: transparent;
  position: fixed;
  color: #fff;
  top: 0;
  z-index: 99;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: right;
}

nav li a {
  display: block;
  text-align: center;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
}

nav li a:hover {
  border-bottom: 3px solid #1abc9c;
}

#logo {
  font-size: 1.5em;
  float: left;
  margin: 0;
  padding: 0;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
  padding: 19px;
  padding-left: 0px;
}

#logo span {
  color: #1abc9c;
}

.nav__inner {
  width: 70%;
  margin: 0 auto;
}

.image__header {
  width: 100%;
  height: 375px;
  top: 0px;
  z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, 0.5),
              rgba(0, 0, 0, 0.5)),
              url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

h1, h2, h4 {
  color: #212121;
  font-family: 'Unica One', cursive;
}

h3, h5 {
  color: #212121;
  font-family: 'Vollkorn', serif;
}

p {
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  color: #212121;
}

h2 {
  font-size: 2.5em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 0.95em;
  border-bottom: 1px solid #212121;
  padding: 15px 0px;
}

.article-header span {
  font-size: 1em;
  color: #888;
  font-family: 'Unica One', cursive;
}

article h2 {
  margin-bottom: 0;
}

article {
  display: block;
}

.main__inner {
  margin: 0 auto;
  width: 60%;
}

section {
  display: inline-block;
}

.content {
  width: 65%;
  float: left;
}

.sidebar {
  float: right;
  width: 25%;
}

snip {
  font-family: monospace;
  background: #ccc;
  padding: 2px 5px;
  border: 1px solid #888;
  border-radius: 5px;
  font-size: 0.7em;
  vertical-align: middle;
  color: #212121;
}

code {
  font-family: monospace;
  color: #212121;
  display: block;
  padding: 15px 10px;
  border-left: 5px solid #1abc9c;
}

pre {
  border: 1px solid #888;
  border-radius: 5px;
  background: #ccc;
  overflow-x: scroll;
}

var {
  color: #16a085;
  font-style: normal;
}

c {
  color: #888;
  font-style: italic;
}

main {
  min-height: 100%;
}

.main__inner:after {
  content: '';
  display: table;
  clear: both;
}

img {
  display: block;
  margin: 0 auto;
}

.page {
  min-height: 100%;
  width: 100%;
  /* Changing height by percentage acts like the only
   * elements on my page are the image in the header
   * and the footer.
   * ---
   * Adding a clearfix to .main__inner resolved this.
  */
}

footer {
  height: 120px;
  width: 100%;
}
<html>

<head>

  <meta charset="utf-8" />
  <link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
  <!-- Also jQuery source in settings -->
  
</head>

<body>

<div class="page">
  
  <div class="page__inner">
    
    <nav class="nav">
      
      <div class="nav__inner">
        
        <div id="logo">
          mynameis<span>jake</span>
        </div> <!-- end #logo -->
        
        <ul>
          <li><a href="https://github.com/mynameisjacobj" class="links">REPOSITORY</a></li>
          <li><a href="#blog" class="links">BLOG</a></li>
          <li><a href="#" class="links">HOME</a></li>
        </ul> <!-- end nav links -->
        
      </div> <!-- end .nav__inner -->
      
    </nav> <!-- end nav -->
    
    <main class="main">

      <div class="image__header">
      </div> <!-- end .image__header -->
      
      <div id="blog" class="main__inner">
        
        <section class="content">
          <article>
            <div class="article-header">
              <h2>UNITY RAYCAST FOR BEGINNERS</h2>
              <span>FEBRUARY 21, 2017</span>
            </div>
            <p>
              Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first&#8212;I know I avoided them initially since I didn't fully understand them&#8212;but they are a incredible tool that can totally help perform countless tasks.
            </p>
<pre><code><var>void</var> Update()
{
  <var>RaycastHit</var> hit;
  <var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
  {
    <var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
    <var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
  }
}</code></pre>
            
            <h3>What is a Raycast and what can I use it for?</h3>
            <p>
              The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
            </p>
            
            <img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
            
          </article>
        </section>
        
        <section class="sidebar">
          <h4>ADDITIONAL CONTENT</h4>
        </section>
        
      </div> <!-- end .main__inner -->

    </main> <!-- end main -->
    
    
    <footer class="footer">
      
      <div class="footer__inner">
        
        WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
        
      </div> <!-- end .footer__inner -->
      
    </footer> <!-- end footer -->
    
  </div> <!-- end .page__inner -->
  
</div> <!-- end .page -->
  
  
</body>
  
</html>

CodePen link with full code

To reiterate: I don't need a sticky footer solution or a fixed footer solution. I just need the footer to acknowledge other divs and sit below the main section. Why is the main section being ignored?

Any help is greatly appreciated. Thanks for your time.

Upvotes: 1

Views: 1201

Answers (3)

sergdenisov
sergdenisov

Reputation: 8572

Seems like you simply should add a clearfix to your .main__inner block, something like this:

.main__inner:after {
    content: '';
    display: table;
    clear: both;
}

Check out:

/*
 * font-family: 'Unica One', cursive;
 * font-family: 'Vollkorn', serif;
 */

body, html {
  width: 100%;
  min-height: 100% !important;
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  height: 70px;
  background: transparent;
  position: fixed;
  color: #fff;
  top: 0;
  z-index: 99;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: right;
}

nav li a {
  display: block;
  text-align: center;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
}

nav li a:hover {
  border-bottom: 3px solid #1abc9c;
}

#logo {
  font-size: 1.5em;
  float: left;
  margin: 0;
  padding: 0;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
  padding: 19px;
  padding-left: 0px;
}

#logo span {
  color: #1abc9c;
}

.nav__inner {
  width: 70%;
  margin: 0 auto;
}

.image__header {
  width: 100%;
  height: 375px;
  top: 0px;
  z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, 0.5),
              rgba(0, 0, 0, 0.5)),
              url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

h1, h2, h4 {
  color: #212121;
  font-family: 'Unica One', cursive;
}

h3, h5 {
  color: #212121;
  font-family: 'Vollkorn', serif;
}

p {
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  color: #212121;
}

h2 {
  font-size: 2.5em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 0.95em;
  border-bottom: 1px solid #212121;
  padding: 15px 0px;
}

.article-header span {
  font-size: 1em;
  color: #888;
  font-family: 'Unica One', cursive;
}

article h2 {
  margin-bottom: 0;
}

article {
  display: block;
}

.main__inner {
  margin: 0 auto;
  width: 60%;
}

.main__inner:after {
  content: '';
  display: table;
  clear: both;
}

section {
  display: inline-block;
}

.content {
  width: 65%;
  float: left;
}

.sidebar {
  float: right;
  width: 25%;
}

snip {
  font-family: monospace;
  background: #ccc;
  padding: 2px 5px;
  border: 1px solid #888;
  border-radius: 5px;
  font-size: 0.7em;
  vertical-align: middle;
  color: #212121;
}

code {
  font-family: monospace;
  color: #212121;
  display: block;
  padding: 15px 10px;
  border-left: 5px solid #1abc9c;
}

pre {
  border: 1px solid #888;
  border-radius: 5px;
  background: #ccc;
  overflow-x: scroll;
}

var {
  color: #16a085;
  font-style: normal;
}

c {
  color: #888;
  font-style: italic;
}

main {
  min-height: 100%;
}

img {
  display: block;
  margin: 0 auto;
}

.page {
  background: red;
  min-height: 100%;
  width: 100%;
  /* Changing height by percentage acts like the only
   * elements on my page are the image in the header
   * and the footer.
  */
}

footer {
  height: 120px;
  width: 100%;
}
<html>

<head>

  <meta charset="utf-8" />
  <link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
  <!-- Also jQuery source in settings -->
  
</head>

<body>

<div class="page">
  
  <div class="page__inner">
    
    <nav class="nav">
      
      <div class="nav__inner">
        
        <div id="logo">
          mynameis<span>jake</span>
        </div> <!-- end #logo -->
        
        <ul>
          <li><a href="https://github.com/mynameisjacobj" class="links">REPOSITORY</a></li>
          <li><a href="#blog" class="links">BLOG</a></li>
          <li><a href="#" class="links">HOME</a></li>
        </ul> <!-- end nav links -->
        
      </div> <!-- end .nav__inner -->
      
    </nav> <!-- end nav -->
    
    <main class="main">

      <div class="image__header">
      </div> <!-- end .image__header -->
      
      <div id="blog" class="main__inner">
        
        <section class="content">
          <article>
            <div class="article-header">
              <h2>UNITY RAYCAST FOR BEGINNERS</h2>
              <span>FEBRUARY 21, 2017</span>
            </div>
            <p>
              Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first&#8212;I know I avoided them initially since I didn't fully understand them&#8212;but they are a incredible tool that can totally help perform countless tasks.
            </p>
<pre><code><var>void</var> Update()
{
  <var>RaycastHit</var> hit;
  <var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
  {
    <var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
    <var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
  }
}</code></pre>
            
            <h3>What is a Raycast and what can I use it for?</h3>
            <p>
              The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
            </p>
            
            <img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
            
          </article>
        </section>
        
        <section class="sidebar">
          <h4>ADDITIONAL CONTENT</h4>
        </section>
        
      </div> <!-- end .main__inner -->

    </main> <!-- end main -->
    
    
    <footer class="footer">
      
      <div class="footer__inner">
        
        WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
        
      </div> <!-- end .footer__inner -->
      
    </footer> <!-- end footer -->
    
  </div> <!-- end .page__inner -->
  
</div> <!-- end .page -->
  
  
</body>
  
</html>

CodePen

Upvotes: 2

Johannes
Johannes

Reputation: 67748

remove float: left from the section with class .content

http://codepen.io/anon/pen/XMrVVv?editors=1100

Upvotes: 1

Hewlett
Hewlett

Reputation: 161

Just put float:left; to both containers. I recommend using a div with class instead of footer though... or any semantic elements to be honest.

/*
 * font-family: 'Unica One', cursive;
 * font-family: 'Vollkorn', serif;
 */

body,
html {
  width: 100%;
  min-height: 100% !important;
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  height: 70px;
  background: transparent;
  position: fixed;
  color: #fff;
  top: 0;
  z-index: 99;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: right;
}

nav li a {
  display: block;
  text-align: center;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
}

nav li a:hover {
  border-bottom: 3px solid #1abc9c;
}

#logo {
  font-size: 1.5em;
  float: left;
  margin: 0;
  padding: 0;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
  padding: 19px;
  padding-left: 0px;
}

#logo span {
  color: #1abc9c;
}

.nav__inner {
  width: 70%;
  margin: 0 auto;
}

.image__header {
  width: 100%;
  height: 375px;
  top: 0px;
  z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

h1,
h2,
h4 {
  color: #212121;
  font-family: 'Unica One', cursive;
}

h3,
h5 {
  color: #212121;
  font-family: 'Vollkorn', serif;
}

p {
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  color: #212121;
}

h2 {
  font-size: 2.5em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 0.95em;
  border-bottom: 1px solid #212121;
  padding: 15px 0px;
}

.article-header span {
  font-size: 1em;
  color: #888;
  font-family: 'Unica One', cursive;
}

article h2 {
  margin-bottom: 0;
}

article {
  display: block;
}

.main__inner {
  margin: 0 auto;
  width: 60%;
}

section {
  display: inline-block;
}

.content {
  width: 65%;
  float: left;
}

.sidebar {
  float: right;
  width: 25%;
}

snip {
  font-family: monospace;
  background: #ccc;
  padding: 2px 5px;
  border: 1px solid #888;
  border-radius: 5px;
  font-size: 0.7em;
  vertical-align: middle;
  color: #212121;
}

code {
  font-family: monospace;
  color: #212121;
  display: block;
  padding: 15px 10px;
  border-left: 5px solid #1abc9c;
}

pre {
  border: 1px solid #888;
  border-radius: 5px;
  background: #ccc;
  overflow-x: scroll;
}

var {
  color: #16a085;
  font-style: normal;
}

c {
  color: #888;
  font-style: italic;
}

main {
  min-height: 100%;
}

img {
  display: block;
  margin: 0 auto;
}

.page {
  background: red;
  min-height: 100%;
  width: 100%;
  float: left;
  /* Changing height by percentage acts like the only
   * elements on my page are the image in the header
   * and the footer.
  */
}

footer {
  float: left;
  height: 120px;
  width: 100%;
}
<html>

<head>

  <meta charset="utf-8" />
  <link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
  <!-- Also jQuery source in settings -->

</head>

<body>

  <div class="page">

    <div class="page__inner">

      <nav class="nav">

        <div class="nav__inner">

          <div id="logo">
            mynameis<span>jake</span>
          </div>
          <!-- end #logo -->

          <ul>
            <li><a href="https://github.com/mynameisjacobj" class="links">REPOSITORY</a></li>
            <li><a href="#blog" class="links">BLOG</a></li>
            <li><a href="#" class="links">HOME</a></li>
          </ul>
          <!-- end nav links -->

        </div>
        <!-- end .nav__inner -->

      </nav>
      <!-- end nav -->

      <main class="main">

        <div class="image__header">
        </div>
        <!-- end .image__header -->

        <div id="blog" class="main__inner">

          <section class="content">
            <article>
              <div class="article-header">
                <h2>UNITY RAYCAST FOR BEGINNERS</h2>
                <span>FEBRUARY 21, 2017</span>
              </div>
              <p>
                Unity's
                <snip>Raycast</snip> and
                <snip>Raycast2D</snip> may seem somewhat daunting at first&#8212;I know I avoided them initially since I didn't fully understand them&#8212;but they are a incredible tool that can totally help perform countless tasks.
              </p>
              <pre><code><var>void</var> Update()
{
  <var>RaycastHit</var> hit;
  <var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
  {
    <var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
    <var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
  }
}</code></pre>

              <h3>What is a Raycast and what can I use it for?</h3>
              <p>
                The raycast is essentially an imaginary line that utilizes a
                <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a
                <snip>RaycastHit</snip>.
              </p>

              <img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />

            </article>
          </section>

          <section class="sidebar">
            <h4>ADDITIONAL CONTENT</h4>
          </section>

        </div>
        <!-- end .main__inner -->

      </main>
      <!-- end main -->


      <footer class="footer">

        <div class="footer__inner">

          WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?

        </div>
        <!-- end .footer__inner -->

      </footer>
      <!-- end footer -->

    </div>
    <!-- end .page__inner -->

  </div>
  <!-- end .page -->


</body>

</html>

Upvotes: 1

Related Questions