Tips on how to align several divs within another div

I've been attempting to center multiple div blocks within another div or HTML document, but I haven't had any success with the methods I've found on StOv.

Here's an image of what I'm aiming for:

https://i.stack.imgur.com/DB7uQ.jpg

Edit:

Unfortunately, I'm utilizing nested jQuery and it's too intricate for jsfiddle. The only option is to provide a link to the files I'm using:

Below is the code snippet:

<div id="device" style="position: relative; height: 971px; width: 100%; margin-left: auto; margin-right:auto;">

    <div class="box size42" data-box="0" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="1" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>
   
    ...
    
</div>
jqueryhtmlcss

Answer №1

Make adjustments to the #device CSS:

  • Delete the width property
  • Utilize auto margins:
#device {
  width: auto;
  margin: 0 auto;
}

Answer №2

To align it in the middle, apply the given CSS code:

#container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

I trust this solution will be beneficial. :)

Answer №3

Unfortunately, without a live demo to reference, it's a bit challenging to provide detailed insights. However, based on the description provided, here are the steps taken:

  • Utilized flexbox, with #device1 serving as the flex container for controlling the children .box positioning at center. Different methods can be used for alternative arrangements.

  • Centered #device1 by applying padding: 10px to the body.

  • Removed all position properties responsible for clustering all .box elements in one corner.

  • Rectified CSS attributes of #device1 which were mistakenly used as CSS properties.

  • Note that original dimensions were preserved, ensuring each element retains its original size.

  • Included another #device2 to demonstrate the flexbox feature of order. Each .box within #device2 has been assigned an order property with integer values. This arrangement is reflected visually (in appearance only; in DOM, they maintain their code-based position) 

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>34593110</title>
  <style>
    html,
    body {
      box-sizing: border-box;
      font: 400 16px/1.45"Verdana";
      height: 100vh;
      width: 100vw;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
      border: 0 none hlsa(0%, 0, 0, 0);
      outline: 0 none hlsa(0%, 0, 0, 0);
    }
    body {
      position: relative;
      background-color: #111;
      color: #EEE;
      padding: 10px;
    }
    #device {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-align-content: center;
      align-content: center;
      outline: 3px dashed red;
      background-color: hsla(0, 100%, 50%, .3);
    }
    .box {
      outline: 1px solid blue;
      background-color: hsla(240, 100%, 50%, .3);
      font-size: 1.2rem;
      text-align: center;
      color: #FF0;
    }
  </style>
</head>

<body>
  <div id="device" height="971" width="100%" style="margin: 20px auto;">
    <div class="box size42" data-box="0" data-width="35" style="width: 35px; height: 35px;">1</div>
    <div class="box size22" data-box="1" data-width="71" style="width: 71px; height: 35px;">2</div>
     .
     .
     (additional HTML code continued)
     .
     .
    <div class="box size22" data-box="20" data-width="71" style="width: 107px; height: 71px;">21</div>
  </div>

  <div id="device" height="971" width="100%" style="margin-left: auto; margin-right:auto;">
    <div class="box size42" data-box="0" data-width="35" style="width: 35px; height: 35px; order: 11;">1</div>
    <div class="box size22" data-box="1" data-width="71" style="width: 71px; height: 35px; order: 20;">2</div>
     .
     .
     (additional HTML code continued)
     .
     .
    <div class="box size22" data-box="20" data-width="71" style="width: 107px; height: 71px; order: 10;">21</div>
  </div>

</body>

</html>

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

How to place a Div element in the middle of a webpage

My webpage background features an image of old Tbilisi, and here is the code I am using: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <style> #links { margin: 0 auto; ...

csshtml

Display/conceal within a jQuery fixed navigation bar (center-aligned)

I am facing challenges with creating a sticky menu that shows/hides with a click button. Considering abandoning the show/hide feature altogether and rebuilding it from scratch in the future. Two major problems I have identified: How can I make the sho ...

javascriptjqueryhtmlcss

Printing content from an Angular dashboard can be achieved by following a few

Currently, I am working on developing a legal document automation program for my company. However, I have encountered an issue during the final stages of completing this web application. For the layout and setup, I am using the default angular Dashboard l ...

htmlangularangularjssassangular-material

Issues with merging styles in TinyMCE 4

I've exhausted all the current configuration options and I'm still unable to resolve this issue. My goal is to have the style tag appended to the selected element without generating an additional span. For example: <p>Hello World!</p> ...

javascripthtmltinymcetinymce-4

Tips on retrieving the status code from a jQuery AJAX request

I am trying to figure out how to retrieve the ajax status code in jQuery. Here is the ajax block I am currently working with: $.ajax{ type: "GET", url: "keyword_mapping.html", data:"ajax=yes&sf="+status_flag, success: callback.success ...

javascriptjqueryajax

Creating a dynamic nested list in HTML using JavaScript with data retrieved from a JSON source

I'm trying to generate a dynamic nested ul\li list from a JSON array. IMPORTANT! While I can use jQuery for this transformation, it's in a node.js environment where DOM access is restricted and I must work with a string. The depth of the a ...

javascripthtmlarraysjsonnode.js

Managing the intersection of div elements

Can someone help me make the inner part of the red circle white, overlapping with the blue circle and transparent for the rest to reveal the green color underneath? If anyone has a solution, I would greatly appreciate it. #bigCircle { display: flex ...

cssoverlap

Does anyone know if it's feasible to return a value from PHP to an HTML form without relying on JavaScript?

Currently, I am in the process of learning how to create a basic web form. My goal is to develop an HTML web form that sends a number to PHP and then displays the number in another text field without refreshing the page. After doing some research online, ...

javascriptphphtmlajax

Nav Bar Toggle Button - Refuses to display the dropdown menus

My Django homepage features a Bootstrap navbar that, when resized, displays a toggle button. However, I am experiencing difficulty with dropdown functionality for the navbar items once the toggle button is activated. Can anyone provide guidance on how to a ...

javascripthtmlcssdjangobootstrap-4

Guide to switching classes with jquery

On my webpage, I have a star rating system that I want to toggle between "fa fa-star" and "fa fa-star checked" classes. I found some information on how to do this here: Javascript/Jquery to change class onclick? However, when I tried to implement it, it di ...

javascripthtmljquery

Internet Explorer failing to trigger Ajax requests

I'm encountering an issue with my script on my webpage - it works perfectly in Chrome, but Internet Explorer is not entering the success{} function of Ajax. It does go into the Complete{} function without any problems. I attempted to pass the data var ...

javascriptjqueryajaxinternet-explorer

Is there a way to add a border around a div that extends beyond the div, similar to what

I'm attempting to create a border around this section, as seen in the image. However, I'm unsure of how to move it a few pixels outside of the main box. Here is what I've tried so far, but it's not quite achieving the desired result. H ...

htmlcssflexboxcss-selectors

Transfer data dynamically between JSP pages using parameters

In my Java application, users can log in and predict football matches. I have created an admin JSP page where I retrieve all team names from a database table to set up this week's matches. Later, after the matches finish, I set the final results to co ...

javahtmljspservletsjstl

Is there a way to customize the slicing of *ngFor in a component according to the components it is being injected into?

This code snippet represents a component that needs to be included in other components: <div class="row"> <div class="col-12 [...]" *ngFor="let course of courses"> <div class="card"> ...

javascripthtmlcssangulartypescript

Unable to assign the second value of the <input type="datetime-local" /> element to zero

I am currently working on a class called ClosedPlatform that has an attribute called Start, which is of type DateTime. public class ClosedPlatform { public DateTime Start; } My goal is to bind the Start attribute of a ClosedPlatform instance to a d ...

htmldatetimedata-bindingblazor

Unexpected token . encountered in Javascript: Uncaught Syntax Error. This error message is triggered when

As someone who is completely new to programming, I was given the task of creating a voting website for a class assignment. In order to store data locally, I managed to create variables and implement them using local storage: var eventName = document.getEl ...

javascripthtml

The issue arises when attempting to reopen the jQuery UI dialog box after a div has been loaded

I am facing an issue with my survey results table where I have an EDIT button for each entry. Clicking on the EDIT button opens a dialog box with the survey results loaded from the database. After editing the answers, I want to save them in the database an ...

jqueryhtmlajaxdialogreload

If a quote character is detected in a string, color the line red

My goal is to highlight each line from a string in red if it contains the ">" character. I am applying this logic to a database query result, and while it's successful, I'm encountering an issue where an HTML line break is inserted after each ...

phphtmlpreg-match

What is the best method to deactivate zoom in/out buttons using JavaScript?

As a newcomer to Phonegap, I've managed to implement zoom in/out functionality using websettings in the .java file. However, I now face a challenge where I need to disable/enable the zoom in/out buttons and stop scrolling at a specific point. I attemp ...

javascriptandroidhtmlcordova

Are there any methods to create a circular z-index?

Is there a way in CSS to arrange #element-one above #element-two, then #element-two above #element-three, and finally #element-three above #element-one? Are there alternative methods to achieve this layout? ...

css