htmlcsscss-multicolumn-layout

Issue With Column Positioning Layout

I could not find something similar to my issue anywhere on the web (I also don't know exactly what to call it), so I was hoping someone here might be able to help out. I don't really know how to explain it, so I'll just post images and code.

What the page should look like:

Final Rendering

What the page does look like:

Current Page

And the CodePen: https://codepen.io/greenreader9/pen/VwWvYGN

It says I must input my code as well, so it is below.

/**Basic**/
html {scroll-behavior: smooth;}
h1 {font-family: 'Farro', sans-serif;}
h2 {font-family: 'Farro', sans-serif;}
h3 {font-family: 'Farro', sans-serif;}
h4 {font-family: 'Farro', sans-serif;}
h5 {font-family: 'KoHo', sans-serif;}
h6 {font-family: 'KoHo', sans-serif;}
p {font-family: 'KoHo', sans-serif;}
li {font-family: 'KoHo', sans-serif;}
a {text-decoration: underline; color: green;}
/**Articles**/
.authorimage{
    height: 100px;
    width: 100px;
    border-radius: 5px;
    padding: 5 10 5 5;
    margin-left: 70px;
    pointer: crosshair;
}

.articleauthor{
    font-family: 'Farro', sans-serif;
    font-size: 30px;
}

.articlebody{
    display: block;
    margin: 5px;
    box-sizing: border-box;
}

.articlecontent{
    width: 66.66%;
    float: right;
    height: auto;
    display:block;
}

.articlesidebar{
    width: 33.33%;
    float: left;
    height: inherit;
    display:block;
}

/**FOOTER**/
.column{
  float: left;
  width: 33.33%;
  text-decoration: none;
}
<div class="articlebody">
    <div class="articlecontent">
        <main>
            <h1 class="articlename">Name Of Aticle Here</h1><br>
            <article>
                <p><span class="firstsentance">The first sentance goes here.</span> And the rest of that intro paragraph goes here!</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
            </article>
        </main>
    </div>  
    
    
    <div class="articlesidebar">
        <div>
            <div>
                <ul class="links">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
            <div>
                <ul class="otherlinks">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- THIS IS SUPPOSED TO BE BELOW THE OTHERS! SEE THE EXAMPLE IMAGE ON THE MAIN POST-->
<footer>
<hr class="doublelineHeight">
    <div class="column">
        <p>SOME TEXT HERE!</p>
        <iframe src="/link-to-iframe" title="iframe title"></iframe><br><br>
        <a href="link">link</a><br>
    </div>
    <div class="column">
            <p>Quick Links</p><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
    </div>
    <div class="column">
            <p>Quick Links</p><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
    </div>
</footer>

Solution

  • Just add clear: both to the hr which has the class .doublelineHeightwhich will put/force it below all floated elements above it:

    /**Basic**/
html {scroll-behavior: smooth;}
h1 {font-family: 'Farro', sans-serif;}
h2 {font-family: 'Farro', sans-serif;}
h3 {font-family: 'Farro', sans-serif;}
h4 {font-family: 'Farro', sans-serif;}
h5 {font-family: 'KoHo', sans-serif;}
h6 {font-family: 'KoHo', sans-serif;}
p {font-family: 'KoHo', sans-serif;}
li {font-family: 'KoHo', sans-serif;}
a {text-decoration: underline; color: green;}
/**Articles**/
.authorimage{
    height: 100px;
    width: 100px;
    border-radius: 5px;
    padding: 5 10 5 5;
    margin-left: 70px;
    pointer: crosshair;
}

.articleauthor{
    font-family: 'Farro', sans-serif;
    font-size: 30px;
}

.articlebody{
    display: block;
    margin: 5px;
    box-sizing: border-box;
}

.articlecontent{
    width: 66.66%;
    float: right;
    height: auto;
    display:block;
}

.articlesidebar{
    width: 33.33%;
    float: left;
    height: inherit;
    display:block;
}

/**FOOTER**/
.column{
  float: left;
  width: 33.33%;
  text-decoration: none;
}

.doublelineHeight {
  clear: both;
}
    <div class="articlebody">
    <div class="articlecontent">
        <main>
            <h1 class="articlename">Name Of Aticle Here</h1><br>
            <article>
                <p><span class="firstsentance">The first sentance goes here.</span> And the rest of that intro paragraph goes here!</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
            </article>
        </main>
    </div>  
    
    
    <div class="articlesidebar">
        <div>
            <div>
                <ul class="links">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
            <div>
                <ul class="otherlinks">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- THIS IS SUPPOSED TO BE BELOW THE OTHERS! SEE THE EXAMPLE IMAGE ON THE MAIN POST-->
<footer>
<hr class="doublelineHeight">
    <div class="column">
        <p>SOME TEXT HERE!</p>
        <iframe src="/link-to-iframe" title="iframe title"></iframe><br><br>
        <a href="link">link</a><br>
    </div>
    <div class="column">
            <p>Quick Links</p><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
    </div>
    <div class="column">
            <p>Quick Links</p><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
    </div>
</footer>