Parent container fails to center align when window is resized

When I resize my window to a smaller size, like that of a smartphone screen, the three inner divs (colored red, green, and blue - .left, .center, and .right) do not align in the center. Please refer to the screenshot attached for clarity. My goal is to ensure that all three divs are centered within the main .container div (pink) whenever the window size is reduced. Any suggestions would be greatly appreciated.

https://i.stack.imgur.com/43aYX.jpg

html,body {
  width: 100%;
  left: 0px;
  top: 0px;
  margin: 0px;
  height: 100%;
}
.container {
  width: auto;
  left: 0px;
  top: 0px;
  float: none;
  width: auto;
  max-width: auto;
  position: relative;
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin-top: auto;
  margin-right: 5%;
  margin-left: 5%;
  display: block;
  right: 0px;
}
.top {
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
  position: relative;
  margin: 0px;
  text-align: center;
}
.left {
  float: left;
  height: auto;
  width: 331px;
  background-color: rgba(255, 0, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: auto;
  top: 0px;
}
.center {
  float: left;
  height: auto;
  width: 331px;
  background-color: rgba(0, 255, 0, 1);
  margin-left: 0px;
  margin-right: auto;
  position: relative;
  left: 0px;
}
.right {
  float: left;
  height: auto;
  width: 331px;
  background-color: rgba(0, 0, 255, 1);
  margin-left: 0px;
  margin-right: auto;
  position: relative;
  left: 0px;
  top: 0px;
}
<div class="container">
  <div class="top"></div>

  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
</div>

htmlcss

Answer №1

In my approach, I utilize separate CSS code to override the existing code under specific conditions. To achieve this, you need to determine the maximum width before making the changes and incorporate the following code:

@media only screen and (max-width: 1187px)
        {
            /* insert new CSS rules here */
        }

For your unique project requirements, you simply need to adjust the floats, margins, and desired width value (in this case, 1187) as follows:

@media only screen and (max-width: 1187px)
            {
            .left {
                margin-right: auto;
                margin-left: auto;
                float: none;
            }
            .center {
                margin-right: auto;
                margin-left: auto;
                float: none;
            }
            .right {
                margin-right: auto;
                margin-left: auto;
                float: none;
            }

            }

Answer №2

UPDATE. Centered Three Blocks within Parent Container

I came across a comment mentioning centering three blocks< similar to - - -. Here is my solution.

html, body {
  margin: 0px;
  height: 100%;
}
.container {
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin: 0 5%;
  text-align: center;
}
.top {
  width: 100%;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
}
.left,
.center,
.right {
  display: inline-block;
  width: 331px;
}
.left   { background-color: rgba(255, 0, 0, 1); }
.center { background-color: rgba(0, 255, 0, 1); }
.right  { background-color: rgba(0, 0, 255, 1); }
<div class="container">
  <div class="top"></div>

  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
</div>

Responsive Design Approach

My preference is for mobile-first design. Initially adjusting the layout for smartphones, then identifying changes as the screen widens and detailing further modifications for broader screens.

To determine the screen width where the three blocks can fit on one row, each 331px wide, totaling 993px or 90% of the screen width. The remaining 10% accommodates margins. Hence,

993px x 100% / 90% = 1104px

A media query has been introduced at this breakpoint. Additionally, irrelevant code parts have been commented out to improve clarity. Please review the result.

html, body {
  margin: 0px;
  height: 100%;
}
.container {
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin-right: 5%;
  margin-left: 5%;
}
.top {
  width: 100%;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
  text-align: center;
}
.left,
.center,
.right {
  width: 331px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1104px) {
  .left,
  .center,
  .right {
    float: left;
    height: auto;
    width: 331px;
  }
}
.left   { background-color: rgba(255, 0, 0, 1); }
.center { background-color: rgba(0, 255, 0, 1); }
.right  { background-color: rgba(0, 0, 255, 1); }
<div class="container">
  <div class="top"></div>

  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus…
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus…
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus…
  </div>
</div>

Answer №3

Are you looking for this? Click here

I have removed the floats and left position styles.

<div class="container">
  <div class="top"></div>

  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
</div>

html,body {
  width: 100%;
  left: 0px;
  top: 0px;
  margin: 0px;
  height: 100%;
}
.container {
  width: auto;
  left: 0px;
  top: 0px;
  float: none;
  width: auto;
  max-width: auto;
  position: relative;
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin-top: auto;
  margin-right: 5%;
  margin-left: 5%;
  display: block;
  right: 0px;

}
.top {
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
  position: relative;
  margin: 0px;
  text-align: center;
}
.left {
  height: auto;
  width: 331px;
  background-color: rgba(255, 0, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;

}
.center {

  width: 331px;
  background-color: rgba(0, 255, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;

}
.right {

  height: auto;
  width: 331px;
  background-color: rgba(0, 0, 255, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;

}

If you prefer them all in one line, check out this code: Fiddle: One-line Fiddle

Simply added a container DIV and adjusted the widths in percentages.

<div class="container">
  <div class="top"></div>
  <div>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center,">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in utri...
  </div>

  <div class="right">
    Lorem ipsrhj\r\n      ...rlll s fncnu.rad fd ;lwaejtvmgsh ddk dj;;osojt ms byd j\\trvd arsvc edno/i.v rg.e ddgenfr,jk
  </div>
  </div>
</div>

For a different layout with margins, visit: Margin Adjusted Fiddle

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

Validating emails using angular material chips

I'm currently working on implementing a form that utilizes input chips to facilitate sending messages to multiple email addresses. While I've made progress in making the form functional, I'm facing difficulties in displaying error messages w ...

htmlangulartypescriptformsvalidation

What is the best way to position a div at the bottom of a web page?

I have a question that may seem basic, but I've been struggling to find a solution. Despite searching for answers, none of the suggestions I've come across have worked for me. My application has two main containers - a header and a content div. T ...

cssangularjstwitter-bootstrap

Pasting a canvas over a div using CSS

My website features a <div> containing creatively styled rings with a design reminiscent of the android unlock pattern. The div showcases 9 dots that can be connected in various configurations. I'm looking to overlay a canvas on this setup to tr ...

jqueryhtmlcss

Tips for preventing <v-layouts> from impacting one another

I'm currently working on a dynamic link box for a homepage website, which can be viewed at . Inside this link box, I have included a button that allows the creation of buttons that function as links. Interestingly, the layouts of both the options but ...

htmltypescriptvuetify.js

Determining the Height of a Navigation Bar Automatically with CSS

My website is built using React and react-strap. I set up my .header-overlay to cover the entire background within the .header. However, due to the presence of the .navbar, the .header-overlay extends beyond the boundaries of the .header vertically. I tho ...

htmlcssreactjsoverlay

Allow the checkbox to only be functional for one use

Toggle the checkboxes between enable and disable based on user's choice to edit or cancel operation. This functionality has been tested on both my Android phone and tablet devices. Upon loading the page, the HTML code appears like this: <div class ...

jqueryhtmljquery-mobile

Rearranging the @use directive in Sass

Here are some style snippets: tokens.scss .text-center { text-align:center; } .bold { font-weight: bold; } @mixin text-style-1 { font-size: 1.2rem; font-weight: bold; } component/card.scss @use "../token.scss" as tokens; .card { @i ...

csssass

Showcasing articles in an XML feed according to specific keywords found in the headline

I'm currently working on designing a website for a client and I want to minimize my involvement in its maintenance. I am considering using RSS feeds to automate the process by having content posted on Blogger and then feeding it to the site. However, ...

javascripthtmlwebrssfeed

Update the positioning of the element to center instead of the default top left origin using jQuery

I am facing an issue with positioning a marker inside a triangle, which is represented by a simple div, as shown in the image below: https://i.stack.imgur.com/0Q7Lm.png The marker needs to be placed exactly at the centroid of the triangle. However, it see ...

javascriptjquerycss

Need Some Help Reversing the Direction of This CSS Mount Animation?

Exploring this fiddle, I encountered a small div showcasing an opacity animation. The animation smoothly executes when the state transitions to true upon mounting the component, causing the div to fade in beautifully. However, I faced a challenge as the an ...

htmlcssreactjs

Database insertion failed due to a data error

I'm struggling to insert data into a MySQL database using PHP based on a condition check, but the process is not functioning as expected. The initial condition is working correctly, but the second condition fails to insert data into the database; ins ...

phphtmlmysqlphpmyadmin

Ways to access large h5p files

My understanding is that h5p files cannot be accessed on a local device in offline mode (although there is an option like h5p-standalone, it requires setting up a local webserver). To view h5p content, a webserver that supports h5p is necessary, such as th ...

html

JavaScript function failing to validate password

While engaging in an online game where the objective is to uncover a password by inspecting the page source or element, I encountered a puzzling line: if(el.value == ""+CodeCode+""). My assumption is that el.value represents my guess, and it indicates that ...

javascripthtmlsrc

The CSS styles are not being applied to the PHP code

I seem to have a tangled mess of CSS / PHP / HTML to deal with. The issue I'm facing is that something works on one PHP script but not the other. Here's a snippet of my code: <?php if ($daten->getData_DB_User($get_page_num) != fa ...

phphtmlcss

When attempting to showcase an image within an Angular form, the error message "Form control with unspecified name attribute lacks a value accessor" is displayed

I have a scenario where I am overlaying icons on an image within my ngForm. The goal is to allow users to drag the icons and save their new location when the form is submitted. Everything works as expected, but I encounter a pesky error whenever the page l ...

htmlangular

Is there a way for me to adjust the window's placement?

Currently utilizing Jquery to launch a new Telerik window, as shown below: var win = $('#myWindow').data('tWindow'); win.open(); With the knowledge of the mouse position (x,y), my goal is to initiate the window at that exact location. ...

jqueryhtmlasp.net-mvc-3telerik

How can I update a CSS class value by utilizing AngularJS variables?

I am currently facing an issue with making my CSS values dynamic. The code I have tried is not functioning as expected. <style> .panel-primary { background-color:{{myColorPanel}} } </style> I came across a similar query on Ho ...

javascripthtmlcssangularjs

The CSS Validator does not recognize the CSS pointer-events and appearance properties

I'm a CSS beginner who recently created an app. I've encountered some errors and warnings when validating my CSS code: https://i.stack.imgur.com/g4MUz.png https://i.stack.imgur.com/Es1DE.png Could someone kindly explain these errors and warnin ...

cssw3c-validation

What is the method to make a String bold when sending it through a messaging service?

Here is the structure of my service: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class MessageService { messages: string[] = []; add(message: string) { this.messages.push(message); ...

htmlangulartypescriptservicecomponents

Printing the contents of a datatable in HTML can be achieved in VB.NET by including headers and setting paper orientation, fit to page, and grand total for print preview and direct print

I'm attempting to print the contents of a datatable in HTML for print preview and direct printing, including headers, setting paper size, orientation, and fitting to page in VB.NET. While it may be easy to accomplish this using an rdlc report, I am u ...

htmlvb.netprintingdatatablereporting