The height of the parent div increases as its children grow when the browser is resized

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:

View image description here

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.

Answer №1

Have you experimented with flexbox?

If you place the two main divs inside another div and apply display:flex; and flex-direction: column;

Check out this JSFiddle for an example.

.test{
  display:flex;
  flex-direction: column;
}
.treebox{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  
}

.box1{
  width:400px;
  text-align:center;
  color:red;
}
.box2{
  width:400px;
  text-align:center;
  color:green;
}
.box3{
  width:400px;
  text-align:center;
  color:blue;
}
.lastbox {
position: relative;
height: 700px;
width: 100%;
background-color: #22a1c4;
}
<div class="test">

<div class="treebox">
  <div class="box1">
  <img src="https://placehold.it/50x50">
              <p id = "title"><b>Applications</b><br/></p>
              <p id = "content">Son of teacher Franca Murolo and worker Giovanni Salvemini[5] who played in a music group, Salvemini started singing as a child. He studied accounting at the technical institute of Molfetta, although he wanted to be a comic book artist. After obtaining his diploma, he decided to work in advertising and won a scholarship to the Academy of Communication.</p>
  </div>
  <div class="box2">
  <img src="https://placehold.it/50x50">
              <p id = "title"><b>Applications</b><br/></p>
              <p id = "content">Son of teacher Franca Murolo and worker Giovanni Salvemini[5] who played in a music group, Salvemini started singing as a child. He studied accounting at the technical institute of Molfetta, although he wanted to be a comic book artist. After obtaining his diploma, he decided to work in advertising and won a scholarship to the Academy of Communication.</p>
  </div>
  <div class="box3">
  <img src="https://placehold.it/50x50">
              <p id = "title"><b>Applications</b><br/></p>
              <p id = "content">Son of teacher Franca Murolo and worker Giovanni Salvemini[5] who played in a music group, Salvemini started singing as a child. He studied accounting at the technical institute of Molfetta, although he wanted to be a comic book artist. After obtaining his diploma, he decided to work in advertising and won a scholarship to the Academy of Communication.</p>
  </div>
</div>
<div class="lastbox">
  
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Making the height of two divs equal within the same parent element using CSS

Looking for a way to make two adjacent divs, #innerwrapper .sidebar and #innerwrapper > .content, from the same parent container, #innerwrapper, have equal heights due to them being floated left. I initially used jQuery in a separate file to resolve th ...

The tooltip being displayed is plain and lacks any design elements

When I hover over my a element, only a simple tooltip appears without any styling, unlike what is shown in the Bootstrap documentation. (I am creating the a element using JavaScript) HTML <!DOCTYPE html> <html lang="en"> <head> ...

Make the div stretch across the entire width of the page, excluding the width of a fixed div located on the right side, without needing to set a margin-right property

I've been struggling to find a solution for my wiki development project. My challenge involves designing a page layout with a fixed-width sidebar on the right, while ensuring that content to the left of the sidebar adjusts its width accordingly. I wan ...

Spacing vertically within a table cell

I'm currently experimenting with creating a vertical text-align: justify effect between divs. I am working with a structure that includes 4 div elements inside a td, like this: <td> <div></div> <div></div> <div ...

What is the best way to shorten string values that exceed a certain length?

Here is an array list I have: $myarray = array( array( 'name' => 'File name 1 - type.zip', 'size' => '600KB', ), array( 'name' => 'File name 2 - type.pdf&a ...

If the value of the input matches, set the checkbox to be

I have successfully implemented functionality that allows the value of an input to be changed by clicking a checkbox. This works without any issues. Now, I am facing the challenge of automatically checking the checkbox when the page loads, but only if the ...

Different ways to prevent invalid entries in an input field with type datetime-local

<input type="datetime-local" step="1"> Is there a way to prevent invalid date input? For example, entering a date like "11:11:1111" in the format "mm-dd-yyyy". How can this be addressed using Moment.js? ...

"Adjust the orientation of a video and ensure it properly fills the screen with CSS styling

Below is the CSS style being used: video { position: absolute; transform: rotate(90deg); width: 100%; height: 100%; z-index: 4; visibility: visible; } This code snippet demonstrates a video element: <video id="myVideo" ...

Using the onClick function to set attributes in React JS

I am currently working with 2 functions: addBookmark() and removeBookmark(). There is a variable called IsBookmarked that can be either true or false. In my JSX code related to bookmarks, it looks like this: {props.singleCompany.IsBookmarked ? ( ...

After transitioning to TypeScript, the CRA app is encountering issues loading CSS files compiled by SASS

My React application was originally created using create-react-app and I had been successfully loading scss files with the node-sass package. However, after deciding to switch to TypeScript following the steps outlined in , my css files are no longer being ...

Incorporating Dynamic Javascript: A Step-by-Step Guide

I came across a select object that looks like this: <select id="mySelect" onchange = "start()" > <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> < ...

How can I prevent the repetition of a background image causing empty spaces?

Encountered an issue with a repeating background image. In instances where the content is relatively short, shorter than the height of the screen, the background image continues to repeat for the remaining space. Please refer to the accompanying screensh ...

The text box is intersecting with the photo

Struggling to craft a clean layout with an upvote button, I encountered an issue where the textarea appears to overlap with the image. Below is my sample code snippet: .my-component-row { display: flex; justify-content: center; align-items: center ...

Can the default position of the scrollbar be set to remain at the bottom?

I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown. jquery code $('document').ready(func ...

Is there a way to convert a URL into a user-friendly json format displayed on a web page

Can someone please help me figure out the proper way to convert this URL into a JSON format that is easily readable using jQuery on an HTML page? ...

Is misbehavior expected at approximately 600 pixels in width?

What is happening with my website when the width is minimized, and how can I resolve it? Issue The website appears fine on mobile devices and full screens, but at reduced sizes, the background image disappears and the top bar behaves strangely (with the l ...

What is the best method to extract individual data values from ul li tags using PHP?

As I navigate through a page filled with HTML codes, I stumble upon snippets like this: <ul class ='trainList'> <li> <div class="smallFont farelist no-discount "> <div class="train-no">ABC 701</div> ...

Utilize the identical button and modify the text displayed on it for implementing my jQuery function that toggles visibility

Is there a way to modify my current jQuery function for displaying and hiding a contact form using the same button? Currently, I have two buttons that toggle the visibility of the form: "Write me" shows the form on click and changes to "I don't want ...

Exploring how to set dropdown menu width for Angular2 mat-select options

Currently, I am using the angular2 mat-select control and facing an issue with the width and position of its dropdown list menu. By default, it is wider and overflows the element on both sides by a few pixels. I have not found any option for adjusting the ...

Is it possible to incorporate cmd.exe into an HTML file?

Currently in the process of creating an online batch tutorial and aiming to integrate the Windows command prompt as a dynamic element on my webpage. Initially attempted using the html5 embed tag, however encountered an error stating unsupported plugin. S ...