CODEWITHSUNDEEP
htmlcss
c.gooderham94
c.gooderham94

Reputation: 107

Sections repeatedly overflowing

I am still working on improving my first website project. One issue that is repeatedly causing me a headache is that some sections keep overflowing into those above. When I say overflow, I mean that when I click on the element in brackets, when hightlighted in the live preview, it is showing the margins to actually be around other content above (as shown in picture). This is happening with various sections of my website an I cannot understand why. I am a total beginner here so i'm sure theres a simple reason as to why and how to fix it universally across the website.

Overflow issue in this image

For some sections I can overcome this with the 'overflow: none" property but ideally i'd like to solve this without the need to repeatedly use it. Note, the overflow none property isnt working for all sections, in particular the one I have shown an image of. Could anyone give some clarity here please?

html {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f6f8fa;
    color: #4E6E9B;
    font-family: 'Signika', sans-serif;
    font-weight: 'E';
}

/* END GENERAL STYLES -----------*/

.one-third-container {
    float: left;
    width: 100%;
    overflow: hidden;
}

.about-one-third {
    width: 33.3333%;
    padding: 2% 0;
    float: left;
    text-align: center;
    background-color: #0066B2;
    color: #f6f8fa;
}

.about-one-third i {
    font-size: 8rem;
    padding-bottom: 5%;
}


/* END ONE THIRD SECTIONS ------*/

.services-offered {
    padding-left: 0;
    margin: 2% 5%;
    -webkit-padding-start: 0;
    list-style-type: none;
    overflow: none;
}

.services-offered li {
    display: inline-block;
    width: 20%;
    vertical-align: top;
    padding: 0 0 0 1.8rem;
    text-align: justify;
}

.services-offered li:before {
    content: "\f00c";
    font-family: FontAwesome;
    width: 1.8rem;
    margin-left: -1.8rem;
    margin-right: 0.5rem;
}

/* END SERVICES OFFERED ---------*/
<!DOCTYPE html>
<html>
<head>
    <title>W Gooderham Gas Services</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway:200,700|Signika:300" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>[enter image description here][1]
    
    <div class="one-third-container">
        <section class="about-one-third">
            <td>
                <i id="third-border" class="fa fa-calendar"></i>
            </td>
            <h2>Routine Servicing</h2>
        </section>

        <section class="about-one-third" id="centre-third">
            <td>
                <i id="third-border" class="fa fa-wrench"></i>
            </td>
            <h2>Installation</h2>
        </section>

        <section class="about-one-third" id="breakdown">
            <td>
                <i class="fa fa-snowflake-o"></i>
            </td>
            <h2>Breakdowns</h2>
        </section>
    </div>
    
<! END ONE THIRD SECTION --------------------->
    
    <ul class="services-offered">
        <li>
        Installation and commission of natural gas central heating systems.
        </li>
        
        <li>
        Routine servicing of all natural gas appliances including warm air units.
        </li>
        
        <li>
        If any of your gas appliances breakdown, we provide a 7 day a week callout service to get them back up and running.
        </li>
        
        <li>
        We can provide gas safety landlord certification for all gas appliances in your properties.
        </li>
    </ul>

Upvotes: 1

Views: 164

Answers (1)

Maharkus
Maharkus

Reputation: 2898

The reason the elements "overflow" to the elements above is because you used float: left; on the class one-third-container (which is fine!). But if the element below doesn't have any float you get the unwanted result of the element getting pushed higher than intended. If you add float:left; to the ul (or the class services-offered) you can prevent this issue.

Edit: Removing the float:left would also work in this case, as the element doesn't need to be floated.

Edit 2: Floats are indeed not that much of the go-to-choice as they were a few years ago. Uncleared elements are a common issue when using floats, which is why flexbox is considered to be better. Flexbox has alot of use cases that simplify many layout problems, that are a little trickier to solve without flexbox. However using flexbox on every element without paying any thought to it can produce unwanted results like for example this:

.container {
  height: 500px;
  display:flex;
}
<div class="container">
<img src="http://via.placeholder.com/350x150">
</div>

In the code snippet the image is skewed. You can fix this pretty easily by adding align-items to the .container, but the point is, that using flexbox on all elements can possibly cause issues, where they are unneccessary.

That said, using flexbox is definitely a good thing as long as you are paying attention to the elements you're applying it to.

Upvotes: 1

Related Questions