Div invading other div

Im trying to add a feedback form to my site and my div keeps invading my other divs. HELP PLZ

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code: Louisville Project</title>

    <link rel="stylesheet" href="../FrontEndDev2020/css/normalize.css">
    <link rel="stylesheet" href="../FrontEndDev2020/css/styles.css">
    <link rel="stylesheet" href="../FrontEndDev2020/css/animation.css">
</head>

<body>

    <div class="header-container">
        <header class="wrapper clearfix">
            <h1 class="title">Code: Louisville Project</h1>
            <nav>
                <ul>
                    <li><a href="https://github.com/MarissaBreean">Github</a></li>
                    <li><a href="mailto:example@example.com">Email</a></li>
                    <li><a href="#">LinkedIn</a></li>
                </ul>
            </nav>
        </header>
    </div>

    <div class="main-container">
        <div class="main wrapper clearfix">

            <article>
                <header>
                    <h1 style="background-color: black;">Hello, my names Marissa. Im attending Code: Louisville to enhance my career choices and brighten my future.</h1>
                    <p style="background-color: black;">When I first started this program, I already had a little experience in the Tech industry. I currently work for a company called Compucom&copy;. We specialize in IT Helpdesk services. I didn't think I would do that <br>great with the
                        company, as I'm honestly not that Tech savvy. But, through support from leadership and coworkers, great documentation, and a can-do attitude, I've now been with the company for 3 years. I started to <br>realize that fixing technology,
                        whether that be software, or hardware related, is kind of like a puzzle, and I LOVE challenges.</p>
                </header>

                <div class="fade-in">
                    <img src="../FrontEndDev2020/img/code.jpg" alt="code that developers use">
                </div>

                <div class="fade-in">
                    <img src="../FrontEndDev2020/img/server.jpg" alt="server room">
                </div>


                <section>
                    <h2 style="background-color: black;">About Code: Louisville</h2>
                    <p style="background-color: black;">Code: Louisville was a program created by the Louisville Metro Government to help expand and bring new people into the Web Development field. <br>We have many jobs here in Louisville that need Junior Developers (and the more experienced)
                        to assist with projects. Now, designing a web page may not be your cup of tea.<br> However, maybe back-end development is. You can help maintain and secure DataBases, help integrate data from applications, build server-side software,
                        work with security settings and defend against hackers.<br>
                        <b>The possibilities are endless</b>.</p>
                </section>
            </article>
            <aside>
                <h3>Skills</h3>
                <ul>
                    <li>Microsoft Active Directory</li>
                    <li>Microsoft Exchange Admin</li>
                    <li>Oracle Provisioning</li>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>

            </aside>
        </div>

        <div class="container">
            <form action="/action_page.php">
                <div class="row">
                    <div class="col-25">
                        <label for="fname">First Name</label>
                    </div>
                    <div class="col-75">
                        <input type="text" id="fname" name="firstname">
                    </div>
                </div>
                <div class="row">
                    <div class="col-25">
                        <label for="lname">Last Name</label>
                    </div>
                    <div class="col-75">
                        <input type="text" id="lname" name="lastname">
                    </div>
                </div>
                <div class="row">
                    <div class="col-25">
                        <label for="subject">Subject</label>
                    </div>
                    <div class="col-75">
                        <textarea id="subject" name="subject" style="height:200px"></textarea>
                    </div>
                </div>
                <div class="row">
                    <input type="button" value="Submit">
                </div>
            </form>
        </div>
    </div>

   <div class="footer-container">
        <footer class="wrapper">
            <text>Reach out to me!</text>
            <a href="mailto:example@example.com">&#9993;</a>
        </footer>
    </div>

</body>
</html>
html {
    color: chartreuse;
    font-size: 1.5em;
    line-height: 1.4;
    box-sizing: border-box;
    background: url(../img/louskyline4.jpg);
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: Helvetica, Helvetica Neue, Arial;
    font-size: 16px;
    line-height: 26px;
}

.wrapper {
    width: 90%;
    margin: 0 auto;
}

.header-container {
    border-bottom: 8px solid chartreuse;
}

.footer-container,
.main aside {
    border: 10px solid chartreuse;
}

.header-container,
.footer-container,
.main aside {
    background: black;
}

.title {
    color: chartreuse;
}

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

nav a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 20px 0;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: black;
    background: chartreuse;
}

nav a:hover,
nav a:visited {
    color: black;
}

nav a:hover {
    text-decoration: underline;
}

.main {
    padding: 30px 0;
}

.main article h1 {
    font-size: 1.5em;
    padding: 18px;
}

.main aside {
    color: white;
    padding: 0px 10px;
}

.footer-container footer {
    color: chartreuse;
    padding: 40px;
    text-align: center;
}

img {
    height: 250px;
    width: 250px;
    border: solid black 5px;
    padding-top: 1px;
    object-fit: fill;
}

p {
    padding: 18px;
}

/*pseudoclasses*/

 :root {
    background-color: black;
}

/* Media Queries */

@media only screen and (min-width: 480px) {
    nav a {
        float: left;
        width: 30%;
        margin: 0 0 0 5%;
        padding: 25px 1%;
        margin-bottom: 0;
    }
    nav li:first-child a {
        margin-left: 0;
    }
    nav li:last-child a {
        margin-right: 0;
    }
}

@media only screen and (min-width: 768px),

only screen and (min-width: 700px) and (orientation: landscape) {
    .title {
        float: left;
        font-size: 1.4em;
    }
    nav {
        float: right;
        width: 60%;
    }
    nav a {
        padding: 15px 1%;
    }
    .main article {
        float: left;
        width: 57%;
    }
    .main aside {
        float: right;
        width: 30%;
    }
}

@media only screen and (min-width: 1140px) {
    .wrapper {
        width: 1026px;
        margin: 0 auto;
    }
    .title {
        font-size: 2em;
    }
    nav a {
        padding: 25px 1%;
    }
}

@media screen and (max-width: 480px) {
    .col-25,
    .col-75,
    input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

/* Clearfix */

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* form style*/

@media screen and (max-width: 480px) {
    .col-25,
    .col-75,
    input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

* {
    box-sizing: border-box;
}

input[type=text],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    resize: vertical;
}

label {
    padding: 10px 0;
    display: inline-block;
}

input[type=button] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=button]:hover {
    background-color: #45a049;

}

.container {
    background-color: #f2f2f2;
    padding: 5px;
    float: right;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 3px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

Hi marissalainhart, welcome to the forums!

I’m not sure what you mean, but mind that floats should come before static elements in html code. Floats can’t rise above non floats or cleared elements.

I see the form’s container is floated and the footer is not, maybe you could look into where the clearfix is placed?

1 Like

As Erik mentioned you haven’t contained your floats properly so preferably add the clearfix class to .main-container or set the footer to clear:both (first option is best).

<div class="main-container clearfix">

Or

.footer-container{clear:both}

OFF-TOPIC
I’m wondering why you are still using floats (for layout) as there are ways of avoiding the float issues these days using flexbox or other techniques that are more robust.

1 Like