1

I'm working on a website for a company for my student co-op and I'm getting this weird issue with content going under my div/image. I dont really know what to do, I'm not the best with CSS and HTML, I only got a couple months of school done on web development. To explain more clearly, I have a div where I have 3 images styled like polaroid pictures side by side, Under that polaroid div where I have the 3 images I'm trying to add an about us header but for some reason when I make something under that polaroid div puts the content UNDER the images and not below it starting a new section.

.header {
    font-family: 'Rubik', sans-serif;
    background-color: rgb(30, 144, 255, 0);
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
}

.cart {
    margin-top: 40px;
    margin-right: 50px;
    height: 30px;
    width: 40px;
    cursor: pointer;
}

.header ul li {
    list-style: none;
    display: inline-block;
    margin: 5px;
}

.mega-menu {
    position: absolute;
    top: 65px;
    left: 0;
    width: 750px;
    height: 250px;
    background: #FFFF00;
    box-sizing: border-box;
    opacity: 0;
    
}


.inner-menu {
    width: 24%;
    float: left;
    margin-right: 1%;

}

.inner-menu:last-child {
    margin-right: 0%;

}

.inner-menu p {
    padding: 10px 0;
}

.buttonmenu button:hover {
    background-color: #FFFF00;
    text-decoration: none;
    color: black;
    cursor: pointer;
    -webkit-box-shadow: inset 1px 1px 10px #333;
    -moz-box-shadow:    inset 1px 1px 10px #333;
    box-shadow:         inset 1px 1px 10px #333;
    transition: all .1s ease;
}

.buttonmenu:hover .mega-menu {
    opacity: 1;
}


.buttonlist button:hover {
    background-color: #FFFF00;
    text-decoration: none;
    color: black;
    cursor: pointer;
    -webkit-box-shadow: inset 1px 1px 10px #333;
    -moz-box-shadow:    inset 1px 1px 10px #333;
    box-shadow:         inset 1px 1px 10px #333;
    transition: all .1s ease;
}

.button {
    background-color: rgb(30, 144, 255);
    border: none;
    color: white;
    text-align: center;
    display: inline-block;
    border-radius: 50px;
    float: left;
    font-size: 16px;
    padding: 8px 25px;
    text-decoration: none;
}

body {
    font-family: 'Rubik', sans-serif;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/heroImage.jpg');
    background-size: cover;
    height: 100vh;
    background-position: left;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
}

.logo {
    margin-top: 3px;
    height: 75px;
    width: 225px;
}

hr {
    border-top: 5px solid white;
}

div.polaroid {
  width: 250px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

.picture {
  position: relative;
  width: 250px;;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #DCDCDC;
}

.picture:hover .overlay {
  opacity: 1;
}

.text {
  font-family: 'Rubik', sans-serif;
  color: black;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.buttontext {
  font-family: 'Rubik', sans-serif;
  color: white;
  background-color: rgb(30, 144, 255);
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  border: none;
  color: white;
  text-align: center;
  border-radius: 50px;
  font-size: 16px;
  padding: 8px 25px;
  text-decoration: none;
}

.buttontext:hover {
    color: black;
    background-color: #FFFF00;
    -webkit-box-shadow: inset 1px 1px 10px #333;
    -moz-box-shadow:    inset 1px 1px 10px #333;
    box-shadow:         inset 1px 1px 10px #333;
    transition: all .1s ease;
}


.row {
}

.auto-slider img{
  display:block;
}
.auto-slider{
  width:250px;
  height:400px;
  
  overflow-x:hidden;
}

.auto-slider__content{
  list-style:none;
  display:flex;
  margin:0;
  padding: 0;
  animation: slide 20s ease-in-out infinite;
}
.auto-slider__content:hover{
  animation-play-state:paused;    
}

@keyframes slide{
  10%{
    transform:translateX(0);
  }
  15%, 30%{
    transform:translateX(-250px);
  }
  35%, 50%{
    transform:translateX(-500px);
  }
  55%, 70%{
    transform:translateX(-750px);
  }
  75%, 90%{
    transform:translateX(0);
  }
  
}

.overlay button {
    cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css1/stylesheet1.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
    
    <div class="header">
        <ul>
            <li><a href="index.php"><img class="logo" src="images/logo_trans.png" alt="logo"></a></li>
            <li class="buttonlist"><button class="button" href="#">HOME</button></li>
            <li class="buttonlist"><a href="#test"><button class="button" href="#">ABOUT US</button></a></li>
            <li class="buttonlist"><button class="button" href="#">PARTNERS</button></li>
            <li class="buttonmenu"><button class="button" href="#">SHOP</button></li>
                <div class="mega-menu">
                    <div class="inner-menu">
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                    </div>
                    <div class="inner-menu">
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                    </div>
                    <div class="inner-menu">
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                    </div>
                </div>
            <a><img class="cart" style="float: right;" src="images/new_cart.png" alt="Cart"></a>
        </ul>
</div>
</head>
<body>

<div style="text-align: center; color: white;">
    <h1>Welcome to Active Printing</h1>
    <hr style="width: 50%;"></hr>
    <br></br>
</div>

<div style="width: 100%; background-color: red;">
    <h1>About Us </h1>
</div>

<div>

<div class="polaroid" style="float: left; padding: 5px; margin-left: 230px;">
    <div class="picture">
        <div class="auto-slider">
            <ul class="auto-slider__content">
                <li><img src="images/embroidery.jpg" alt="food-1" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-2" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-3" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-4" style="height: 400px; width: 250px; object-fit: cover;"></li>
            </ul>
        </div>
            <div class="overlay">
                <div class="text">Business Printing</div>
                <button class="buttontext" style="margin-top: 35px;" href="#test">Click to view</button>
            </div>
    </div>
    <div class="container">
        <p>Business Printing</p>
    </div>
</div>

<div class="polaroid" style="float: left; padding: 5px; margin-left: 20px;">
    <div class="picture">
        <div class="auto-slider">
            <ul class="auto-slider__content">
                <li><img src="images/embroidery.jpg" alt="food-1" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/business-printing.jpg" alt="food-2" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/canvas-printing.jpg" alt="food-3" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/magnets.jpg" alt="food-4" style="height: 400px; width: 250px; object-fit: cover;"></li>
            </ul>
        </div>
            <div class="overlay">
                <div class="text">Canvas Printing</div>
                <button class="buttontext" style="margin-top: 35px;" href="#test">Click to view</button>
            </div>
    </div>
    <div class="container">
        <p>Canvas Printing</p>
    </div>
</div>

<div class="polaroid" style="float: left; padding: 5px; margin-left: 20px;">
    <div class="picture">
        <div class="auto-slider">
            <ul class="auto-slider__content">
                <li><img src="images/embroidery.jpg" alt="food-1" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-2" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-3" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-4" style="height: 400px; width: 250px; object-fit: cover;"></li>
            </ul>
        </div>
            <div class="overlay">
                <div class="text">Embroidery</div>
                <button class="buttontext" style="margin-top: 35px;" href="#test" >Click to view</button>
            </div>
    </div>
    <div class="container">
        <p>Embroidery</p>
    </div>
</div>
</div>
<br></br>
<div style="width: 100%; background-color: red;">
    <h2>About Us </h2>
</div>
</body>
</html>

Extra: Ignore the mega menu as of right now it currently does not work.

SmiiB
  • 51
  • 5
  • You Clearly not mentioned your issue. Anyway I little bit tried to understand. try adding `z-index` like this `.header{z-index: 999}`. If this didn't solve your issue, explain your issue clearly. – Shashank Gb May 18 '21 at 17:14
  • To explain more clearly, I have a div where I have 3 images styled like polaroid pictures side by side, Under that polaroid div where I have the 3 images I'm trying to add an about us header but for some reason when I make something under that polaroid div puts the content UNDER the images and not below it starting a new section. – SmiiB May 18 '21 at 17:18
  • could you edit the code as code snippet? https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ - it will be easier to run it – zdolny May 18 '21 at 17:18
  • Add `overflow: hidden` to `.polaroid` parent element. – pavel May 18 '21 at 17:20
  • I tried overflow: hidden, it does not work, I have a run code snippet there, its a bit jumbled around but I hope you can understand what I'm trying to say – SmiiB May 18 '21 at 17:22

1 Answers1

0

You need to end floating elements using clear after last floated element, or adding overflow: hidden to their parent.

pseudocode

<div style="overflow: hidden">
    <float>
    <float>
    <float>
</div>

OR

<div>
    <float>
    <float>
    <float>
    <div style="clear: left"></div>
</div>

Your working code with adding overflow: hidden:

.header {
    font-family: 'Rubik', sans-serif;
    background-color: rgb(30, 144, 255, 0);
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
}

.cart {
    margin-top: 40px;
    margin-right: 50px;
    height: 30px;
    width: 40px;
    cursor: pointer;
}

.header ul li {
    list-style: none;
    display: inline-block;
    margin: 5px;
}

.mega-menu {
    position: absolute;
    top: 65px;
    left: 0;
    width: 750px;
    height: 250px;
    background: #FFFF00;
    box-sizing: border-box;
    opacity: 0;
    
}


.inner-menu {
    width: 24%;
    float: left;
    margin-right: 1%;

}

.inner-menu:last-child {
    margin-right: 0%;

}

.inner-menu p {
    padding: 10px 0;
}

.buttonmenu button:hover {
    background-color: #FFFF00;
    text-decoration: none;
    color: black;
    cursor: pointer;
    -webkit-box-shadow: inset 1px 1px 10px #333;
    -moz-box-shadow:    inset 1px 1px 10px #333;
    box-shadow:         inset 1px 1px 10px #333;
    transition: all .1s ease;
}

.buttonmenu:hover .mega-menu {
    opacity: 1;
}


.buttonlist button:hover {
    background-color: #FFFF00;
    text-decoration: none;
    color: black;
    cursor: pointer;
    -webkit-box-shadow: inset 1px 1px 10px #333;
    -moz-box-shadow:    inset 1px 1px 10px #333;
    box-shadow:         inset 1px 1px 10px #333;
    transition: all .1s ease;
}

.button {
    background-color: rgb(30, 144, 255);
    border: none;
    color: white;
    text-align: center;
    display: inline-block;
    border-radius: 50px;
    float: left;
    font-size: 16px;
    padding: 8px 25px;
    text-decoration: none;
}

body {
    font-family: 'Rubik', sans-serif;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/heroImage.jpg');
    background-size: cover;
    height: 100vh;
    background-position: left;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
}

.logo {
    margin-top: 3px;
    height: 75px;
    width: 225px;
}

hr {
    border-top: 5px solid white;
}

div.polaroid {
  width: 250px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

.picture {
  position: relative;
  width: 250px;;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #DCDCDC;
}

.picture:hover .overlay {
  opacity: 1;
}

.text {
  font-family: 'Rubik', sans-serif;
  color: black;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.buttontext {
  font-family: 'Rubik', sans-serif;
  color: white;
  background-color: rgb(30, 144, 255);
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  border: none;
  color: white;
  text-align: center;
  border-radius: 50px;
  font-size: 16px;
  padding: 8px 25px;
  text-decoration: none;
}

.buttontext:hover {
    color: black;
    background-color: #FFFF00;
    -webkit-box-shadow: inset 1px 1px 10px #333;
    -moz-box-shadow:    inset 1px 1px 10px #333;
    box-shadow:         inset 1px 1px 10px #333;
    transition: all .1s ease;
}


.row {
}

.auto-slider img{
  display:block;
}
.auto-slider{
  width:250px;
  height:400px;
  
  overflow-x:hidden;
}

.auto-slider__content{
  list-style:none;
  display:flex;
  margin:0;
  padding: 0;
  animation: slide 20s ease-in-out infinite;
}
.auto-slider__content:hover{
  animation-play-state:paused;    
}

@keyframes slide{
  10%{
    transform:translateX(0);
  }
  15%, 30%{
    transform:translateX(-250px);
  }
  35%, 50%{
    transform:translateX(-500px);
  }
  55%, 70%{
    transform:translateX(-750px);
  }
  75%, 90%{
    transform:translateX(0);
  }
  
}

.overlay button {
    cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css1/stylesheet1.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
    
    <div class="header">
        <ul>
            <li><a href="index.php"><img class="logo" src="images/logo_trans.png" alt="logo"></a></li>
            <li class="buttonlist"><button class="button" href="#">HOME</button></li>
            <li class="buttonlist"><a href="#test"><button class="button" href="#">ABOUT US</button></a></li>
            <li class="buttonlist"><button class="button" href="#">PARTNERS</button></li>
            <li class="buttonmenu"><button class="button" href="#">SHOP</button></li>
                <div class="mega-menu">
                    <div class="inner-menu">
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                    </div>
                    <div class="inner-menu">
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                    </div>
                    <div class="inner-menu">
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                        <p>Mega menu</p>
                    </div>
                </div>
            <a><img class="cart" style="float: right;" src="images/new_cart.png" alt="Cart"></a>
        </ul>
</div>
</head>
<body>

<div style="text-align: center; color: white;">
    <h1>Welcome to Active Printing</h1>
    <hr style="width: 50%;"></hr>
    <br></br>
</div>

<div style="width: 100%; background-color: red;">
    <h1>About Us </h1>
</div>

<!-- here add overflow: hidden -->
<div style="overflow: hidden">

<div class="polaroid" style="float: left; padding: 5px; margin-left: 230px;">
    <div class="picture">
        <div class="auto-slider">
            <ul class="auto-slider__content">
                <li><img src="images/embroidery.jpg" alt="food-1" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-2" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-3" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-4" style="height: 400px; width: 250px; object-fit: cover;"></li>
            </ul>
        </div>
            <div class="overlay">
                <div class="text">Business Printing</div>
                <button class="buttontext" style="margin-top: 35px;" href="#test">Click to view</button>
            </div>
    </div>
    <div class="container">
        <p>Business Printing</p>
    </div>
</div>

<div class="polaroid" style="float: left; padding: 5px; margin-left: 20px;">
    <div class="picture">
        <div class="auto-slider">
            <ul class="auto-slider__content">
                <li><img src="images/embroidery.jpg" alt="food-1" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/business-printing.jpg" alt="food-2" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/canvas-printing.jpg" alt="food-3" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/magnets.jpg" alt="food-4" style="height: 400px; width: 250px; object-fit: cover;"></li>
            </ul>
        </div>
            <div class="overlay">
                <div class="text">Canvas Printing</div>
                <button class="buttontext" style="margin-top: 35px;" href="#test">Click to view</button>
            </div>
    </div>
    <div class="container">
        <p>Canvas Printing</p>
    </div>
</div>

<div class="polaroid" style="float: left; padding: 5px; margin-left: 20px;">
    <div class="picture">
        <div class="auto-slider">
            <ul class="auto-slider__content">
                <li><img src="images/embroidery.jpg" alt="food-1" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-2" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-3" style="height: 400px; width: 250px; object-fit: cover;"></li>
                <li><img src="images/embroidery.jpg" alt="food-4" style="height: 400px; width: 250px; object-fit: cover;"></li>
            </ul>
        </div>
            <div class="overlay">
                <div class="text">Embroidery</div>
                <button class="buttontext" style="margin-top: 35px;" href="#test" >Click to view</button>
            </div>
    </div>
    <div class="container">
        <p>Embroidery</p>
    </div>
</div>
</div>
<br></br>
<div style="width: 100%; background-color: red;">
    <h2>About Us </h2>
</div>
</body>
</html>
pavel
  • 26,538
  • 10
  • 45
  • 61