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!!

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

jQuery and HTML: Need help enabling an <input> or <select> element?

JQuery is having trouble with playing multiple sound files or causing delays with events

The use of script src with vue.js is causing issues

Filtering, cleaning, and confirming the validity of data input allowed for HTML tags

Resizing Your WordPress Header Logo

text/x-handlebars always missing in action

having trouble transferring the password field in PHP to phpMyAdmin

What is the process for incorporating the !important declaration into a CSS-in-JS (JSS) class attribute?

The absence of a meta tag in the Wordpress head section

Scrolling behavior in two columns with sticky positioning

Bootstrap image with simplistic arrow indicators

The functionality of CSS isn't up to snuff on Mozilla Firefox

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Issue with the top margin of the body

Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Changing the background color using jQuery switch case statement

Expanding size on hover without affecting the alignment of surrounding elements

Is it normal for e.target.result to only work after two or three tries?

Trouble with the display:none attribute in Firefox and Chrome

Using Selenium and Python to scrape text from a continuously refreshing webpage after each scroll