Why is this
containing previous div?

Question

I have a problem where the top <div> element appears to be containing the <div> above it, although the source code would indicate that this should not be the case. An image of this effect is below, and you can see that my horizontal header seems to be contained in the same <div> as the <div> containing the "place" <h2> tag, but it is not and this should not be happening.

Here is the HTML for this section:

<div class="tabSection">
                <div class="tabDiv">
                    <ul class="tabsList">
                        <li class="tabItem"><i class="fas fa-globe-europe"></i>Places</li>
                        <li class="tabItem"><i class="fas fa-skiing"></i>Activities</li>
                        <li class="tabItem"><i class="fas fa-info-circle"></i>More Info</li>
                        <li class="tabItem"><i class="fas fa-phone-alt"></i>Contact Us</li>
                    </ul>
                </div>

                <div id="placeTabBody" class="tabBody">
                    <h2 class="tabHeader">Place</h2>
                </div>

                <div id="activitiesTabBody" class="tabBody">
                    <h2 class="tabHeader">Activities</h2>
                </div>

                <div id="moreInfoTabBody" class="tabBody">
                    <h2 class="tabHeader">More Information</h2>
                </div>

                <div id="contactUsTabBody" class="tabBody">
                    <h2 class="tabHeader">Contact Us</h2>
                </div>
            </div>
        </div>

And here is the CSS:

.tabsList {
    list-style: none;
    margin-left: 10px;
    display: block;
}

.tabsList li {
    display: block;
    float: left;
    font-size: 18pt;
    width: 155px;
    cursor: pointer;
    margin-right: 18px;
    margin-top: 20px;
    border-bottom: 2px solid #e84118;
    transition: 0.3s;
}

.tabsList li:hover {
    border-color: #44bd32;
}

.tabsList li i {
    margin-right: 7px;
}

.tabBody {
    display: block;
    background-color: red;
    width: 100%;
    margin: 10px 0 10px 10px;
}

Please help!

note: when you include html tags in your question text, like "`
`", you need to wrap it in backticks, otherwise it will remain invisible in the text output. (I edited it accordingly now) — Johannes, Dec 20 '19 at 10:06

score 1 · Accepted Answer · answered Dec 20 '19 at 10:02

1

It seems a missing float clearing. Add height: auto and overflow:hidden to .tabsList

.tabsList {
    list-style: none;
    margin-left: 10px;
    display: block;
    height: auto;
    overflow: hidden;
}

answered Dec 20 '19 at 10:02

Fabrizio Calderan

120,726
26
164
177

Works perfectly now! Can't believe I didn't think of this before! – dominic thorpe Dec 20 '19 at 10:13

Why is this containing previous div?

1 Answers1

Why is this
containing previous div?