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

Submitting modal form information using AJAX to PHP

As a novice in the realm of web programming, I find myself seeking some guidance to untangle a riddle. Regrettably, my grasp of the basics still leaves much to be desired. Within my main page, view.adminsettings.php, I've designated a Navigation DIV ...

javascriptphpjqueryhtmlajax

Execute a JavaScript function on a Node server following a click event in an HTML document

Hello everyone, I am currently working on a project using node.js in a Windows environment. With the help of the express module, I am trying to create a static page that includes a Submit form. When someone clicks the "Submit" button, I intend to execute a ...

javascripthtmlnode.jsexpress

Is it possible for me to include a static HTML/Javascript/jQuery file in WordPress?

My extensive HTML file contains Javascript, jQuery, c3.js, style.css, and normalize.css. I am wondering if I can include this file as a static HTML page within Wordpress. Say, for instance, the file is called calculator.html, and I want it to be accessib ...

javascriptjqueryhtmlcsswordpress

Submitting forms using Ajax

Utilizing AJAX to submit an HTML input form and redirecting the output page upon completion has presented me with some unexpected results. I have explored two different approaches, but for some reason, they yield different outcomes. The HTML form structur ...

ajaxformsjquery

Tips for iterating through a collection of arrays with jQuery

I am facing an issue with looping through an array of arrays and updating values or adding new keys to each array. Here is my current setup: var values = []; values['123'] = []; values['456'] = []; values['123&apo ...

javascriptjqueryarrays

Form submission issue persists despite ajax partial rendering

Currently, I'm working on a website that allows users to express their wishes. My goal is to make it as user-friendly as possible by allowing them to create wishes from any page on the site. To achieve this, I am considering using a jQuery/Ajax approa ...

jqueryruby-on-railsajax

Experiencing problems with web page layout when using bootstrap on IE8?

Here is a code snippet that functions correctly in IE9 and later versions, but encounters issues in IE8: <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6" id="div1"> <div class="panel panel-default" style="" id="panel1"> ...

javascripthtmlcssinternet-explorer-8twitter-bootstrap-3

Obtain the form value upon submission without the need to reload the page

I am facing an issue where I have a form and I want to trigger the display of a div (in the same page) and execute a JavaScript function upon clicking submit, all without causing a page refresh. <form action="#" method="post" name= "form1" id = "form ...

javascriptphphtmlajax

What is preventing Web API from triggering a CORS error in browsers such as Chrome and Edge, as well as the Postman tool?

While working on developing an API in Asp.Net Core 3.1, everything seemed to be functioning properly. However, I encountered CORS-related errors when attempting to send requests via ajax. Interestingly, these errors were not present when sending GET reques ...

javascriptjqueryajaxcorspostman

Having trouble with the scrollbar appearance after updating Chrome?

I've encountered an issue with my code after the latest Chrome update. Is there a way to implement cross-browser styling for scrollbars? // Looking for Scrollbar Styling Solution const scrollbarStyle = { scrollbarColor: `${themeLayers.scrollBar[0 ...

javascriptcssmaterial-ui

Is your Jquery AJAX request not functioning asynchronously as expected?

I recently started delving into web design and am just beginning to explore jQuery. In my quest to implement a star rating system on my website, I encountered an issue where the user needs to refresh the entire page in order to see the updated star ratings ...

jqueryajax

Excessive white space within a relative block div causing the content to appear smaller in comparison

Currently, I am developing a straightforward form that includes CSS-based help boxes. These help boxes are designed to appear when the user hovers over the corresponding row. After leaving my project untouched for a few days, I encountered some bugs upon ...

htmlcss

Tips for adjusting text to fit within a container without needing to use overflow:auto

Is there a way to prevent text overflow in a container without using the overflow:auto property? I've come across plugins that automatically reduce the text size, but I'm not keen on that solution. What I want is for long words or URLs to wrap on ...

jqueryhtmlcss

To subscribe to the display of [Object Object], you cannot use an *ngIf statement without being inside an *ngFor loop

In my angular Quiz project, I have a functionality where every user can create quizzes. I want to display all the quizzes that a logged-in user has completed. Here is how I attempted to achieve this: // Retrieving user ID and category ID inside Re ...

htmlangulartypescriptangular-ng-ifsubscribe

Tips for transferring data from the Item of a repeater to a JavaScript file through a Button click event for use in Ajax operations

I am working with a repeater that displays data from my repository: <div class="container" id="TourDetail"> <asp:Repeater ID="RptTourDetail" runat="server" DataSourceID="ODSTTitle" ItemType="Tour" EnableViewState="false" OnItemDataBound="Rp ...

javascriptc#jqueryasp.netajax

How can we identify if the user is utilizing a text-input control?

Incorporating keyboard shortcuts into my HTML + GWT application is a goal of mine, but I am hesitant about triggering actions when users are typing in a text area or utilizing the keyboard for select menu operations. I am curious if there exists a method ...

javascripthtmlgwtfocus

The property 'filter' is not recognized on the 'Object' type. An attempt to filter the response was made

Trying to fetch data from a JSON file that matches the player's name in the URL, such as localhost:4200/players/Febiven, should only retrieve information about Febiven. The code is written in Angular 6. The current code snippet is as follows: player ...

htmlangulartypescripthttp

Navigating data within a JSON file with D3 javascript: a step-by-step guide

Currently, I am attempting to extract and manipulate data from a JSON file using D3 Javascript. Below is the content of the JSON file: { "Resources": [ { "subject": "Node 1", "group" : "1" }, { "predicate": ...

javascriptjqueryjsond3.js

Leveraging Bootstrap column classes with diverse div heights

Currently, I am working on a layout design using Bootstrap 3 that involves eight text divs. These divs have almost the same height, but some are slightly taller depending on the screen width. My goal is to arrange them into three columns on desktop and th ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Unique twist on the Bootstrap grid: perfectly centered

I'd like to design a 12-column Bootstrap grid with specific colors. The header should be light blue, the body in green, and the footer orange against a grey background. I want the grid to be centered on the screen with horizontal light blue stripes m ...

twitter-bootstrapcss