Mastering the art of centering three divs within a larger div using HTML and CSS

I'm having trouble centering three div elements within another div. I attempted to use verticle-align and negative margins, but nothing seems to be working.

.float-container {
  border: 3px solid red;
  padding: 250px;
  position: relative;
  background-color: lightblue;
}

.float-child {
  width: 150px;
  height: 150px;
  float: left;
  padding: 10px;
  border: 2px solid red;
  margin: 30px;
  vertical-align: middle;  
}
<div class="float-container">
  <div class="float-child">
    <div>Float Column 1</div>
  </div>
  <div class="float-child">
    <div>Float Column 2</div>
  </div>
  <div class="float-child">
    <div>Float Column 3</div>
  </div>
</div>
htmlcss

Answer №1

example for my comment

vertical alignment is not available for floating elements. Nowadays, for this type of layout, using grid or flexbox is more efficient, flexible, and easy to implement. Floating elements are no longer the best solution ;) 

.float-container {
  border: 3px solid red;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  min-height:500px;
  position: relative;
  background-color: lightblue;
}

.float-child {
    width: 150px;
    height: 150px;
 
    padding: 10px;
    border: 2px solid red;
  
}
<div class="float-container">

  <div class="float-child">
    <div>Float Column 1</div>
  </div>
  
  <div class="float-child">
    <div>Float Column 2</div>
  </div>

    <div class="float-child">
    <div>Float Column 3</div>
  </div>
  
  </div>

Now, the children only need to be sized. The alignment and gap between them is set from the parent container using Flexbox. A minimum height of 500px is set (inspired by the padding of 250px).

Answer №2

To achieve the desired layout, replace float: left; with display: flex;, justify-content: center;, align-items: center;, flex-direction: row;. Utilizing flex or grid for such requirements can simplify the implementation process.

Answer №3

.float-container {
  display: flex;
  padding: 250px;
  position: relative;
  align-items: center;
  border: 3px solid red;
  justify-content: center;
  background-color: lightblue;
}

.float-child {
    width: 150px;
    height: 150px;
    padding: 10px;
    border: 2px solid red;
    margin: 0 10px;
    vertical-align: middle;  
}
 <div class="float-container">

    <div class="float-child">
      <div>Float Column 1</div>
    </div>
    
    <div class="float-child">
      <div>Float Column 2</div>
    </div>
  
      <div class="float-child">
      <div>Float Column 3</div>
    </div>
    
    </div>

Answer №4

If you're looking for a more contemporary approach, utilizing Flexbox can be a simple solution without the constraints of using float. Here's an example to demonstrate:

.container {
  border: 3px solid red;
  padding: 20px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.child {
  width: 150px;
  height: 150px;
  padding: 10px;
  border: 2px solid red;
}
<div class="container">

  <div class="child">
    Flex Column 1
  </div>

  <div class="child">
    Flex Column 2
  </div>

  <div class="child">
    Flex Column 3
  </div>

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

Filter posts on Blogger by unique terms

Currently, I have a code snippet designed to showcase blog posts based on tags. There is an option to modify the section that houses the loop: <b:loop values='data:post.labels' var='label'> Utilizing any of these variables: da ...

htmlxmlbloggerblogger-dynamic-views

Design a div element with a responsive aspect ratio of 16:9

Hey everyone, I've been working on creating a responsive div with a 16:9 ratio. However, I've noticed that when I resize the window, the container3 remains the same size. Can anyone spot an issue in my code and offer some help? Thanks! $(docum ...

javascripthtmlcssresponsive-design

When the draggable item is released near the drop zone, allow drag and drop to combine

In my latest project, I created a fun game that involves matching different shapes. The goal is to drag the correct figure next to its corresponding shadow figure for a perfect match. Currently, if you partially overlap the square with its shadow, the game ...

javascripthtmlcssdrag-and-dropjquery-ui-draggable

height-full card-header style in bootstrap

https://i.sstatic.net/lT8kk.png Is there a way to align cards in a group without breaking the layout when using height-full in card-header? <div class="pb-5 row justify-content-center"> {% for movie in movie_list %} <div ...

htmlflaskbootstrap-4

Refreshing a dynamic form in PHP during the execution of a task

I have a basic email form set up and I need it to operate within a specific process. The user will input a query, then wait briefly for the results. While waiting, I want the screen to display the email form and refresh every 5 seconds. Once the process is ...

phpjavascripthtml

Nav Dropdown Beyond Container Bounds

I'm working on implementing a flexbox navigation menu with dropdowns for certain items. However, I've encountered an issue where the dropdown lists are appearing to the right of the container on hover, rather than below it as expected for a typic ...

htmlcssflexbox

Experiencing issues with my website navigation malfunctioning on specific iOS devices

After testing my project today, I discovered that the mobile navigation on my website is not displaying its list items on certain iOS devices. The navigation worked fine on an iPhone 5 and iPad Mini, but failed to show the list items on an iPhone 4 and old ...

ioshtmlcssresponsive-design

The vertical scrolling feature will come to a halt once it reaches a specific limit

Check out this website: How can I prevent the vertical scroll from continuing past the orange footer boundary? ...

cssscroll

Creating a Custom "Save As" Dialog in HTML5 and JavaScript for Downloading Files

I have developed a NodeJS/Express application that is capable of generating and downloading an Excel document (created using ExcelJS) when a user clicks on a button. Currently, the file gets automatically downloaded to the default download location of the ...

javascripthtmlnode.jsexpressexceljs

What could be the reason why the color of pixels X and Y is not being retrieved successfully in this

Seeking to extract the color of pixel X,Y from an image using the code example provided in this response (). $('#map').mousemove(function(e) { if(!this.canvas) { this.canvas = $('<canvas/>') ...

jqueryhtmlimage-processing

What is the best method for eliminating shading on sub-tabs in R Shiny?

Currently, I am in the process of developing a user-friendly interface with senior tabs and sub-tabs underneath to guide users through various options. To better assist users in navigating these choices, I have implemented a system where inactive senior ta ...

htmlcssrshinytabs

What steps can I take to bring this idea to life in my gallery?

Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the s ...

javascripthtmlcss

Steps for adding a background image to a div element

I am struggling to place my background behind the jumbotron div, but no matter what I do, it always ends up appearing below the image instead of on top of it. Can someone please guide me on how to resolve this issue? Note: I have a specific requirement wh ...

htmlcssbootstrap-4

jQuery not functioning properly when included in a separate JavaScript file

I'm facing an issue with my jquery code not working properly when I place it in a separate js file instead of embedding it directly into the html. Currently, my setup looks like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3 ...

jquerycssresponsive-design

What is causing onbeforeunload to consistently display a dialog box?

I'm facing an issue where my javascript code displays a confirmation dialog even when there is no unsaved data. I have simplified the problem to this bare minimum: window.addEventListener("beforeunload", (e) => { e.returnValue = null; retu ...

javascripthtml

What causes Bootstrap 4 elements to initiate a full reload of an Angular 7 application?

Currently, I am utilizing bootstrap 4 and angular 7 in my project. The element below is responsible for toggling the visibility of a sidebar: <a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar" ></a> ...

cssangularwebbootstrap-4

Using jQuery to fetch LDAP data and return it in JSON format

I am encountering an issue with a returned JSON value. When the LDAP result is valid, the JSON return is also OK but when the result is invalid, the JSON becomes invalid as well. I am using UWamp and I am new to this. Thank you all. PHP code : <?php ...

phpjqueryhtmljson

The input tag loses focus after its value is updated using a class method in Angular 8.x

Currently, I am working on integrating a credit card payment method and formatting its number through specific methods. Here is how it is done: HTML <div class="form-group" *ngFor="let formField of cardFields; let cardFieldIndex = index;"> ...

javascripthtmltypescriptinputangular8

Obtaining the client's IP address from the browser using Angular (Typescript) - A step-by

Hello there, I am in need of assistance with obtaining a client's IP address and browser using TypeScript. Is it possible to achieve this using TypeScript instead of JavaScript? If not, what is the process for doing so in TypeScript? For instance, I ...

htmlangularjstypescriptuser-agent

Is there a way to soften the repetitive elements in the background image?

Is there a method to blur the part of a background image that is repeated, such that if it is positioned in the center, the sides of the image appear blurry as well? ...

jqueryhtmlcss