I have a div containing images and text with a background I added in CSS. Then I want a new div with-CodePudding

I have a div containing images and text with a background I added in CSS. Then I want a new div with text. The text keeps showing over the first div and nothing seems to work. I have read up on all the position options in CSS and more. I don't just want to move it down because I'm trying to make the website as responsive as possible.

MY HTML: DIV 1:

<div id="carousel">
    <div >
        <img src="images/img1.jpg">
        <div > Title </div>
    </div>
    <div >
        <img src="images/img2.jpg">
        <div > Title </div>
    </div>
    <div >
        <img src="images/img3.jpg">
        <div > Title </div>
    </div>
    <div >
        <img src="images/img1.jpg">
        <div > Title </div>
    </div>
    <div >
        <img src="images/img2.jpg">
        <div > Title </div>
    </div>
    <div >
        <img src="images/img3.jpg">
        <div > Title </div>
    </div>

    <p id="carouselhead"> YOUR BUILDING IS OUR BUSINESS </p>
    <p id="carouseltext"> We offer the complete package to create your own wealth with property. <br>
    We have the expertise to deliver excellent construction projects. <br>
    We combine this with a willingness to make a difference & add value to your business.</p>
    
    <div id="library"><a href="url"> SEE MORE </a></div>
</div>

DIV 2:

<div id="about">
    <p id="abouthead"> ABOUT INCICON </p>
    <p id="abouttext"> <u>InciCon has the skills and expertise to: </u><br><br>
        Undertake development from concept to complete construction. <br>
        Project Management turnkey projects - to your needs. <br>
        Provide valuable input on cost-effective design & construction. <br>
        Provide a competent Quantity Surveying service. <br>
        Negotiate the most competitive rates. <br>
        Source & Manage the most suitable suppliers & subcontractors. <br></p>
</div>

CSS: DIV 1:

#carousel {
background-image: url(images/carouselbackground.jpg);
width: 92%;
position: absolute;
margin-top: 1%;
padding-left: 4%;
padding-right: 4%;
}

.gallery {
width: 14%;
margin-top: 4%;
margin-left: 1%;
margin-right: 1%;
display: inline-block;
}

.gallery img {
width: 100%;
height: auto;
}

.desc {
padding: 5%;
text-align: center;
font-family: 'Montserrat', sans-serif;
}

#carouselhead {
font-family: 'Open Sans', sans-serif;
font-size: 300%;
text-align: center;
font-weight: 800;
color: #456eb0;
}

#carouseltext {
font-family: 'Montserrat', sans-serif;
font-size: 100%;
text-align: center;
}

#library {
margin-top: 4%;
margin-bottom: 4%;
text-align: center;
}

#library a {
text-decoration: none;
color: black;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 2%;
padding-right: 2%;
background-color: gray;
}

DIV 2:

#about {
position: relative;
background-color: white;
}

#abouttext {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 120%;
}

#abouthead {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 200%;
font-weight: 800;
color: #456eb0;
}

CodePudding user response：

remove position:absolute

from #carousel in your css file.

CodePudding user response：

remove position: absolute; from #carousel in your css file. be

#carousel {
  background-image: url(images/carouselbackground.jpg);
  width: 92%;
  margin-top: 1%;
  padding-left: 4%;
  padding-right: 4%;
}

because, positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).