CSS Float content creating whitespace and overlapping other div

Question

I'm in the midst of creating a responsive portfolio at the moment and I'm running into a bit of trouble.

Before a certain breakpoint (css media query), the second and third paragraph in the 'About' section of my website are in floats. As the window gets smaller, the text starts to overlap the footer and eventually create a whitespace at the bottom and side. When it reaches the breakpoint, the floats are valued as 'none'.

How can I make it so that the height of the container is determined by how much content is in there (i.e. the normal behaviour)? I've tried a clearfix, but that doesn't seem to work.

https://codepen.io/webdevkid/pen/gmBVMj

HTML

<body>
    <nav>
        <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a><div id="menu-icon"></div></div><div class="clear"></div>
            <ul id="main-links">
                <a href="#"><li><span class="word-position">About</span></li></a>
                <a href="#"><li><span class="word-position">Work</span></li></a>
                <a href="#"><li class="last-child"><span class="word-position">Contact</span></li></a>
            </ul>
    </nav>
    <div id="main-container">
        <div id="introductory-background">
            <div id="introductory-overlay">
                <div id="introductory-content">
                    <div id="introductory-container">
                        <h1 id="role-header">Junior Web Developer</h1>
                        <h3 id="role-support-text">...but that's not all I can do</h3>
                        <a id="read-more" class="no-select">Read More</a>
                    </div>
                </div>                 
            </div>
        </div>
        <div id="about-section">
            <br />
            <br />
            <div id="photo-frame">
                <div id="picture"></div>
            </div>
            <br />
            <div id="about-text-container">
                <p>Hi There! My name is Ed Garbutt, a Junior Web Developer based in South Buckinghamshire, with a huge passion for all things programming.</p>
                <br />
                <p id="about-left-side" class="side-by-side">Sadly, I'm not like most Developer out thers. I don't drink Red Bull or Monster Cans. I'm not a fan of Start Wars. I don't read Marvel Comic Books, but I am someone who likes going outside here and then.</p>
                <p id="about-right-side" class="side-by-side">All jokes aside, what you <b>will</b> get is someone who prides himself on attention to details, who will always rise to a challenge ans is constantly looking to better himself, building upon his existing knowledge of programming languages and frameworks.</p>
            </div>
        </div>
    </div>
    <footer>
        <p id="footer-text">
            &#169; 2016 Ed Garbutt. All rights reserved.
        </p>
    </footer>
</body>

CSS

    body {
    margin: 0;
}
nav {
  width: 100%;
  height: 50px;
  position: fixed;
  background-color: rgb(40, 40, 40);
  border-bottom-style: solid;
  border-bottom-color: rgb(238, 0, 0);
  border-bottom-width: 7.5px;
  padding-top: 14px;
  z-index: 10;
}

#logo {
    position: relative;
    bottom: 5px;
    font-size: 30px;
    padding-left: 8px;
    float: left;
    font-family: bebas;
}

#word-1 {
    color: rgb(0, 154, 205);
}

#word-2 {
    color: rgb(255, 250, 250);
}

ul#main-links {
  list-style: none;
  margin: 0;
  padding-right: 50px;
  float: right;
  height: 100%;
  border-bottom: 7.5px solid transparent;
  display: block;
font-size: 0;
}

ul#main-links li {
  display: inline-block;
  text-align: center;
  border-bottom-style: solid;
  border-bottom-width: 7.5px;
border-bottom-color: rgb(238, 0, 0);
  color: white;
  font-family: arcon;
  font-size: 18px;
  height: 100%;
    width: 90px;
  position: relative;
  z-index: 2;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
    color: white;
}

a:active {
  text-decoration: none;
    color: white;
}

a#logo-link {
    text-decoration: none;

}

a#logo-link:visited {
  text-decoration: none;
    color: inherit;
}

a#logo-link:active {
  text-decoration: none;
    color: inherit;
}

ul#main-links > a > li > span.word-position {
  position: relative;
    top: 5px;
}

#menu-icon {
    height: 48px;
    width: 48px;
    display: none;
    cursor: pointer;
    background-image: url("../images/hamburg-white-2.png");
}

#main-container {
    padding-top: 71.4px;
}

@media screen and (min-width: 656px) {
    ul#main-links {
        display: block !important;
    }
}

@media screen and (max-width: 656px) {

    nav {
        height: initial;
    }

    #logo {
        width: 100%;
        float: none;
        padding-left: 0;
        text-align: center;
        bottom: 8px;
    }

    #menu-icon {
        display: inline-block;
/*        float: right;*/
        position: absolute;
        right: 10px;
        top: -2px;
    }

    ul#main-links {
        display: none;
        float: none;
        padding-right: 0;
        padding-left: 0;
        width: 100%;
    }

    ul#main-links li {
        width: 100%;
        display: block;
        border: none;
        padding: 10px 0;
    }

    ul#main-links li:not(.last-child) {
        border-bottom-style: solid;
        border-bottom-color: rgb(238, 0, 0);
        border-bottom-width: 2.5px;
    }

    ul#main-links > a > li > span.word-position {
        top: 0px;
    }

    #main-container {
        padding-top: 62.4px;
    }
}

@media screen and (max-width: 400px) {
   #logo {
        bottom: 7.5px;
        font-size: 23px;
        padding-left: 10px;
        text-align: left;
    } 

    #menu-icon {
        height: 32px;
        width: 32px;
        background-image: url("../images/hamburg-white-1.png");
        top: 0.4px;
        right: 20px;
    }

    #main-container {
        padding-top: 52.4px;
    }
}



/* ----INTORDUCTION---- */

#introductory-background {
    background-image: url('../images/eternity-1024x768.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
/*    min-height: 527px;*/
    height: 90vh;
    background-size: 100% 100%;
    overflow: auto;
}

#introductory-overlay {
    display: table;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

#introductory-content {
    margin-left: auto;
    margin-right: auto;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#introductory-container {
    position: relative;
    bottom: 60px;
}

h1#role-header {
    display: block;
    position: relative;
    right: 5em;
    opacity: 0;
    font-size: 48px;
    color: rgb(255, 250, 250);
}

h3#role-support-text {
    display: block;
    opacity: 0;
    position: relative;
    top: 20px;
    font-size: 30px;
    color: rgb(255, 250, 250);
}

#read-more {
    border-radius: 38px;
    background-color: rgb(255, 250, 250);
    padding: 0.5em 1.5em;
    font-size: 24px;
    cursor: pointer;
}

@media screen and (max-width: 656px) {

    #introductory-container {
        bottom: 60px;
    }

    h1#role-header {
        font-size: 37px;
    }

    h3#role-support-text {
        top: 15px;
        font-size: 24px;
    }

    #read-more {
        font-size: 19px;
    }
}

@media screen and (max-width: 400px) {

    #introductory-container {
        bottom: 72.5px;
    }


   h1#role-header {
        font-size: 28px;
    }

    h3#role-support-text {
        top: 11px;
        font-size: 20px;
    }

    #read-more {
        font-size: 16px;
    }
}


/* -------------------- */
/* -------ABOUT-------- */

#about-section {
    width: 100%;
    height: 500px;
    background-color: rgb(131, 111, 235);
}

#photo-frame {
    margin: 0 auto;
    background-color: royalblue;
    width: 180px;
    height: 180px;
    border-radius: 100px;
    border-style: solid;
    border-color: beige;
    border-width: 7.5px;
    z-index: 2;
}

#photo-frame > #picture {
    width: 100%;
    height: 100%;
    background-image: url('../images/Ed.png');
    border-radius: 100px;
}

#about-section > #about-text-container {
    margin: 0 auto;
    width: 80%;
}

#about-section > #about-text-container > p {
    margin: 0;
    text-align: center;
/*    padding: 0 3rem;*/
    font-size: 22px;
}

#about-section > #about-text-container > p.side-by-side {
/*    display: inline-block;*/
    width: 45%;
    text-align: justify;
}

#about-section > #about-text-container > p#about-left-side {
    float: left;
}

#about-section > #about-text-container > p#about-right-side{
    float: right;
}

@media screen and (max-width: 868px) {
    #about-section > #about-text-container > p.side-by-side {
    /*    display: inline-block;*/
        width: 100%;
    }

    #about-section > #about-text-container > p#about-left-side {
        float: none;
        padding-bottom: 1.5rem;
    }

    #about-section > #about-text-container > p#about-right-side{
        float: none;
    }
}

@media screen and (max-width: 656px) {
    #photo-frame {
        width: 150px;
        height: 150px;
    }

    #about-section > #about-text-container {
        width: 90%;
    }

    #about-section > #about-text-container > p {
        text-align: justify;
        padding: 0 1.5rem;
        font-size: 20px;
    }
}

@media screen and (max-width: 400px) {
    #photo-frame {
        width: 125px;
        height: 125px;
    }

    #about-section > #about-text-container {
        width: 100%;
    }

    #about-section > #about-text-container > p {
        padding: 0 0.5rem;
        font-size: 18px;
    }
}

/* -------------------- */
/* -------FOOTER------- */

footer {
    width: 100%;
    background-color: black;
}

footer > p#footer-text {
    margin: 0;
    text-align: center;
    font-family: arial;
    color: rgb(169, 169, 169);
    padding: 20px;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* -------------------- */

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

score 0 · Answer 1 · answered Mar 29 '17 at 14:12

So this boils down to your p.side-by-side definition which is set at 45%.

If you want to not have columns on small screen sizes, then the approach would be to only set that 45% value with a break-point above mobile.

Your using a non-mobile first approach that makes this stuff harder (in my opinion). The easier way to go about it is to not add any width styles to those columns, and only add the 45% and the float, once the screen is above (say) 768px. In other words your media queries will generally have min values, not max.

I think a good way to start to think mobile-first is to realise that mobile layouts use kind of "less" CSS than desktops. So you keep it simple, just using semantic html, and then add in styles as the screen size increases to start making columns etc.

Do you think you could give me a jsFiddle example of how you would do it? — WebDevKid, Mar 29 '17 at 14:51

LKG · Accepted Answer · 2017-03-29T15:14:21.050

0

Try this:

#about-section {
    width: 100%;
    background-color: rgb(131, 111, 235);
}

Description

You are using #about-section id remove the height property or use height:auto, you have given a fixed height. And use float:left as well in p tag ids.

here your update code

edited Mar 29 '17 at 15:14

answered Mar 29 '17 at 14:59

LKG

4,152
1
11
21

Works perfectly. Thanks, mate. I completely forgot that I had the fixed height value (it was just a temporary measure). I should have known better. I had to add the clearfix, for when the window is higher than 868px, becuase I was getting the same problem, but all works now. Thanks! – WebDevKid Mar 29 '17 at 15:06

CSS Float content creating whitespace and overlapping other div

2 Answers2