Aligning Divs in a Responsive Browser

Question

Aligning Divs in a Responsive Browser

In the following illustration, I am facing an issue with my responsive code. I have three sections named square1, 2, and 3, each containing a white div with text on top and an icon positioned absolutely. Everything works fine when the browser width is 920px or higher. However, between 720 to 940 pixels, I am trying to make these three elements take up 50% of the width - two displayed on top and one at the bottom, all centered. So far, it has turned into a mess. Can anyone help me understand what I am doing wrong? Here is a link to my current DEMO

HTML:

<div id="section2">

        <div id="centralize2">
            <div id="square1">
                <div id="white1">
                    <img src="images/hexagon1.png" class="hexagon" />
                    <h2 class="title1">Ipsum Dolor Consectetur1</h2>
                    <h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
                </div>
            </div>

            <div id="square2">
                <div id="white1">
                    <img src="images/hexagon2.png" class="hexagon" />
                    <h2 class="title1">Ipsum Dolor Consectetur2</h2>
                    <h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
                </div>

            </div>
            <div id="square3">

                <div id="white1">
                    <img src="images/hexagon3.png" class="hexagon" />
                    <h2 class="title1">Ipsum Dolor Consectetur3</h2>
                    <h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
                </div>
            </div>
        </div>

    </div>

Thanks!!

https://i.sstatic.net/u5OG8.png

html css

Answer 1

Answer №1

Utilizing the power of flexbox can help you achieve your desired layout without relying on absolute positioning unnecessarily. When the width exceeds 940px, the div elements will naturally arrange themselves side by side. Feel free to experiment with the complete code snippet below.

Additionally, I have made some improvements to the code by replacing duplicate id attributes with a more appropriate class. This ensures valid markup according to web standards.

.section2 {
position: relative;
background-color: #112e4c;
overflow: hidden;
}

.square1, .square2, .square3 {
margin-top: 59px;
}

.white1 {
  margin: 20px;
background-color: #fff;
text-align: center;
}

.hexagon {
position: absolute;
left: 50%;
}

.title1 {
font-size:18px;
margin-top: 90px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;

}

@media all and (min-width:720px) {
  
  .centralize2 {
    display: flex;
    flex-flow: row wrap;
  }

  .square1, .square2, .square3 {
  flex-basis: calc(50%);
  }
  
}


@media all and (min-width:940px) {
  
  .square1, .square2, .square3 {
  flex-basis: calc(100%/3);
  }
  
}

<body>
<div class="section2">


      <div class="centralize2">
<div class="square1">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur1</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>

<div class="square2">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur2</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>

</div>
<div class="square3">

<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur3</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
</div>

</div>

</body>

Answer 2

Utilizing the power of flexbox can help you achieve your desired layout without relying on absolute positioning unnecessarily. When the width exceeds 940px, the div elements will naturally arrange themselves side by side. Feel free to experiment with the complete code snippet below.

Additionally, I have made some improvements to the code by replacing duplicate id attributes with a more appropriate class. This ensures valid markup according to web standards.

.section2 {
position: relative;
background-color: #112e4c;
overflow: hidden;
}

.square1, .square2, .square3 {
margin-top: 59px;
}

.white1 {
  margin: 20px;
background-color: #fff;
text-align: center;
}

.hexagon {
position: absolute;
left: 50%;
}

.title1 {
font-size:18px;
margin-top: 90px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;

}

@media all and (min-width:720px) {
  
  .centralize2 {
    display: flex;
    flex-flow: row wrap;
  }

  .square1, .square2, .square3 {
  flex-basis: calc(50%);
  }
  
}


@media all and (min-width:940px) {
  
  .square1, .square2, .square3 {
  flex-basis: calc(100%/3);
  }
  
}

<body>
<div class="section2">


      <div class="centralize2">
<div class="square1">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur1</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>

<div class="square2">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur2</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>

</div>
<div class="square3">

<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur3</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
</div>

</div>

</body>

Answer 3

Answer №2

When dealing with your layout, the issue seems to be related to absolute positioning. To resolve this, consider removing absolute positioning and instead floating the blocks left while adjusting the margins accordingly. I will work on putting together a functioning demo for you promptly.

I had the opportunity to modify your demo, and it appears that you may be seeking something along these lines: https://jsfiddle.net/ah5zz8qq/

#section2 {
width: 100%;
background-color: #112e4c;
overflow: hidden;
}

#centralize2 {
  width: 880px;
  height: 310px;
  margin: 40px auto;
  text-align: center;
}

#square1 {
  display: block;
float: left;
width: 33.3%;
  position: relative;
}

#square2 {
  display: block;
float: left;
width: 33.3%;
position: relative;
}

#square3 {
  display: block;
float: left;
width: 33.3%;
  position: relative;
}

#white1 {
width: 280px;
height: 250px;
background-color: #fff;
text-align: center;
  position: relative;
}

.hexagon {
position: absolute;
left: 50%;
  top: 0;
margin-left: -52px;
margin-top: -59px;
}

.title1 {
  display: block;
font-size:18px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;
}


@media all and (max-width:940px) {
  
#centralize2 {
width: 90%;
} 

#section2 {
height: 720px;
}

#square1 {
  display: block;
width: 50%;
float: left;
}

#square2 {
  display: block;
width: 50%;
float: left;
  margin-bottom: 10px;
}

#square3 {
  display: block;
  clear: both;
width: 50%;
float: none;
  margin: 0 auto;
}

#white1 {
width:300px;


}

@media all and (max-width: 720px) {
  
#section2 {
height: 1070px;
}

#buttons {
margin-top:25px;
}

#square1 {
width: 100%;
}

#square2 {
width: 100%;
margin-top:340px;
}

#square3 {
width: 100%;
margin-top:340px;
}

#white1 {
width: 100%;
position: absolute;

} 
}
}

Answer 4

When dealing with your layout, the issue seems to be related to absolute positioning. To resolve this, consider removing absolute positioning and instead floating the blocks left while adjusting the margins accordingly. I will work on putting together a functioning demo for you promptly.

I had the opportunity to modify your demo, and it appears that you may be seeking something along these lines: https://jsfiddle.net/ah5zz8qq/

#section2 {
width: 100%;
background-color: #112e4c;
overflow: hidden;
}

#centralize2 {
  width: 880px;
  height: 310px;
  margin: 40px auto;
  text-align: center;
}

#square1 {
  display: block;
float: left;
width: 33.3%;
  position: relative;
}

#square2 {
  display: block;
float: left;
width: 33.3%;
position: relative;
}

#square3 {
  display: block;
float: left;
width: 33.3%;
  position: relative;
}

#white1 {
width: 280px;
height: 250px;
background-color: #fff;
text-align: center;
  position: relative;
}

.hexagon {
position: absolute;
left: 50%;
  top: 0;
margin-left: -52px;
margin-top: -59px;
}

.title1 {
  display: block;
font-size:18px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;
}


@media all and (max-width:940px) {
  
#centralize2 {
width: 90%;
} 

#section2 {
height: 720px;
}

#square1 {
  display: block;
width: 50%;
float: left;
}

#square2 {
  display: block;
width: 50%;
float: left;
  margin-bottom: 10px;
}

#square3 {
  display: block;
  clear: both;
width: 50%;
float: none;
  margin: 0 auto;
}

#white1 {
width:300px;


}

@media all and (max-width: 720px) {
  
#section2 {
height: 1070px;
}

#buttons {
margin-top:25px;
}

#square1 {
width: 100%;
}

#square2 {
width: 100%;
margin-top:340px;
}

#square3 {
width: 100%;
margin-top:340px;
}

#white1 {
width: 100%;
position: absolute;

} 
}
}

Aligning Divs in a Responsive Browser

Answer №1

Answer №2

Similar questions

Using jQuery's toggleClass method to implement CSS transformations

Position the Crossmark to align with text using CSS styling

Issues arise when implementing ReactJS transitions for progress bars

Showing a notification that is persistent and not dismissible

What is the best way to prompt users to submit comments with a popup textarea box?

Conceal a division based on its numerical position

What is the most efficient way to populate a dynamic table in a form with a user's past responses using PHP?

Using Phonegap alongside ons-scroller and ons-button

What is the best way to use PHP in order to retrieve the element containing the visit ID from the specific row within an HTML table?

Retrieve the value from another select element

in tailwind, the position transition does not work as expected

Search for "conditions" in a basic HTML DOM parser

Attempting to embed an image within the datepicker input

I have developed a web page using asp.net that cannot be resized

AngularJS - Oops! Looks like we encountered an error: [$injector:modulerr]

The color of the text on the Homepage appears differently on iOS Safari

Implementing a keypress function that can handle duplicate names

Adjust the styling with jQuery according to the selected value from the dropdown menu

AngularJS is used to vertically collapse three different div elements. This feature

Modify css with php instead of using FTP