I have a set of three divs aligned horizontally within a parent div. As the browser width changes, one of the child divs wraps under the other two when the width is reduced, transitioning them to a vertical alignment. Here are some visual examples:
Here is the corresponding HTML markup:
<div id="tribox">
<div id = "boxweb">
<img src="../media/img/web.png">
<p id = "title"><b>Websites</b><br/></p>
<p id = "content">Content here...</p>
</div>
<div id = "boxsocial">
<img src="../media/img/socialmedia.png" style="width: 180px; height: 180px;">
<p id = "title"><b>Social Media</b><br/></p>
<p id = "contenent">Content here...</p>
</div>
<div id = "boxapp">
<img src="../media/img/app.png">
<p id = "title"><b>Applications</b><br/></p>
<p id = "content">Content here...</p>
</div>
</div>
And here is the related CSS styling:
#tribox{
width:1200px;
margin: 0 auto;
height: 100%;
margin-top: 50px;
text-align:center;
}
#boxsocial{
float: left;
width:400px;
text-align: center;}
#boxsocial img{
left: 0px;
margin-left: 0px;
margin-top: 5px;
}
#boxweb{
display: inline-block;
width:400px;
text-align: center;}
#boxweb img{
left: 0px;
margin-left: 0px;
margin-top: 5px;
}
#boxapp{
float: right;
width:400px;
text-align: center;}
#boxapp img{
left: 0px;
margin-left: 0px;
margin-top: 5px;
}
Beneath these divs, there is a second div:
<div id ="secondbody">
</div>
Its CSS looks like this:
#secondbody {
position: relative;
height: 700px;
width: 100%;
background-color: #22a1c4;
}
My issue arises when resizing the browser as the second div overlaps the first one due to static heights. How can I ensure the second div remains underneath the first div at all times?
Currently, I've implemented @Media queries for specific width ranges, but I believe this solution lacks elegance and efficiency. Apologies for any language issues.