I am facing an issue with the layout of my element, which includes an image and text centered inside a parent container.
Whenever I try adding more elements below the existing image and text, the green text with a red border overflows the current parent .about and moves to the next parent .contact-us.
To see and modify the code, you can visit this fiddle link: https://jsfiddle.net/04rmefx7/
Here is the provided code snippet:
body,
html {
height: 100%;
}
.inline-block {
display: inline-block;
}
/* Styles for about section */
.about {
background-color: #dad04a;
position: relative;
height: 100%
}
.about img {
height: 100px;
}
p{
border: 4px solid red;
color: green;
font-weight: bold;
}
/* Styles for contact us section */
.contact-us {
background-color: #eeb03c;
}
<!-- HTML structure -->
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- About Section -->
<div class="about text-center">
<div class="inline-block">
<img class="pull-left" src="https://placehold.it/600">
<div class="pull-left text-left">
<h4 class="inline-block">Heading</h4>
<span>Lorem ipsum dolor sit amet</span><br>
<span>Lorem ipsum dolor sit amet</span><br>
<span>Lorem ipsum dolor sit amet</span><br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span><br>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="clearfix"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et velit officia alias harum nam illum pariatur deleniti reprehenderit, aliquam, commodi iure modi, facilis error dolorum doloribus. Porro, hic explicabo dolores. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Dolore dolor explicabo quas, est, iure non repellendus eaque, nemo eum repudiandae voluptatem rem quos iste a. Non nisi aliquid consequuntur. Libero!</p>
</div>
<!-- End of About Section -->
<!-- Contact Us Section -->
<div class="contact-us text-center">
<h2>Contact us</h2>
</div>
<!-- End of Contact Us Section -->