CSS align multiple elements closely together horizontally

Can you solve this CSS puzzle?

I have a div, known as #parentDiv, that is absolutely positioned and has a width of 100%.

Inside #parentDiv, I want to place 'n' number of child divs evenly spaced out within the parent div.

If there's only one div, let's call it #childDiv1, it should completely fill the screen with its color.

For two divs, #childDiv1 and #childDiv2, they should each take up half of the screen horizontally with their respective colors.

All child divs must have identical CSS properties for future manipulation using jQuery. The goal is for new child divs to dynamically fit into the parent div without any issues.

Your assistance on this matter would be highly valued!

htmlcss

Answer №1

In my opinion, achieving your desired layout can be done by using display:table for the parent element and display:table-cell for the child elements. Additionally, setting table-layout:fixed will ensure that the widths of the cells are not based on their content.

Here is how you can structure your HTML:

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

And here is how you can style it with CSS:

.parent {
  display:table;
  table-layout:fixed;
  width:100%;
}
.child {
  display:table-cell;
}

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 make a specific table row stand out using AngularJS and CSS

Can you provide advice on how to highlight a specific row in a table? I have a table along with some angular code snippets. Here's an example: angular.module('myApp', []).controller('myTest', function($scope) { var data = []; ...

javascripthtmlcssangularjs

Issue encountered when concealing page elements followed by revealing them again

My goal is to conceal an id within a page and then reveal it once all the JavaScript has finished loading on the page. The JavaScript I am using to display the content again is: $(document).ready(function() { $("#HomePage")[0].style.visibility = "visib ...

javascriptjqueryhtmlcss

Picture emerges from the lineup

My dilemma involves repositioning an image within a row > col-md-6. To address this, I devised two classes - .pos1 and .pos2 .pos1 { position: relative; } .pos2 { position: absolute; right: 0px; } However, when applying these classes, the ...

htmlcsstwitter-bootstrap-3

Transforming the table into a list by categorizing every 3 rows together

SharePoint tends to use nested tables excessively, causing issues when trying to implement a jQuery carousel on them. To resolve this, I discovered a piece of jQuery code that can convert a table into a list: var list = $("<ul/>"); $('#tab1&apo ...

jqueryhtml

What is the method for adding the square root symbol to a button's value?

I am attempting to display the square root symbol inside a button, but I am having trouble making it work. Below is my button code: <input type="button" id="sqrt" value="sqrt" onclick="insert function here"> For the value, I want the square root sy ...

csshtmlbuttonsqrt

Adding two BR tags between inline images within a wrapper is causing inconsistencies in spacing when viewed in Firefox compared to all other browsers. Check out an example of this issue in

JS Fiddle Link http://jsfiddle.net/Xfvpu/1/ Having a perplexing issue with image rendering in Firefox compared to other browsers. The xhtml doctype is used with proper br / tag spacing, but the gap between two images on this specific document displays dif ...

htmlcssbrowser

How can I omit a child element from a list of children using jQuery?

Within my website's structure, I have a parent div element with the ID #mmm-a that is initially set to be hidden using the CSS property visibility: hidden as a result of a previous onclick function. To make this parent div reappear when clicked, I am ...

javascriptjqueryhtmljquery-selectors

The Bootstrap navigation bar vanishes when viewed on mobile devices

I've integrated Bootstrap 5 with my navbar, but when viewed on a mobile device, the buttons disappear. Even hovering over them doesn't display anything. Is there a solution for this issue? Below is the code snippet: <nav class="navbar na ...

htmlcssbootstrap-5

Why isn't the image adjusting its size to fit the container it's placed in? Am I missing something?

My issue involves getting an image to resize and stay within its designated div. However, the image continues to spill over onto the div below when I adjust the browser size or view it on my laptop. I have not set any fixed dimensions for the image. I am ...

cssimagetwitter-bootstrapresponsive-designbootstrap-5

What is the reason behind the addition of escape characters to the hidden input value?

<body> <div> <?= $_POST['msg'] ?> </div> <form id="frm" method="post"> <input type="hidden" name='msg' value='{"field0": "Im a string", "field1": 84, "field3": "so am I"}' /> < ...

phphtmljson

What steps can be taken to prevent a wrapper's CSS from affecting its enclosed elements?

My container div includes some opacity and auto height that I don't want to affect all elements within it. Is there a way to preserve the container's styles without impacting its contents? ...

htmlcss

To create a complete layout without relying on fixed positioning, ensure that the header, container, and footer collectively

Is there a method to ensure the header, container, and footer encompass the entire layout without using fixed positioning in CSS? Check out this HTML fiddle for reference. <div class="wrapper"> <header> <img src="https://www.ecobin.co ...

jqueryhtmlcss

Stacked divs needed to be aligned vertically

Is there a way to make the head and main tabs fixed vertically one below the other? Keep in mind that these need to be separate angular components and cannot be combined under another div. The rows also need to be scrollable. .pages { float: left; ...

htmlcss

Deciding the source URLs for external iframes

Is it possible to detect the URL displayed in an iframe? How can we ensure that links within an iframe open in a new tab/window? Moreover, is there a way to achieve this even with the same-origin policy for external frames? If not, what causes this violat ...

javascripthtmliframebrowsersame-origin-policy

Populate a string with HTML elements

I need help loading a string into UIwebview. The text is plain coming from the database. I want the webview to display the text in bold. How can I add an HTML <b> tag or any other tag to format this simple text sourced from the database? ...

iphonehtmluiwebview

In next js, the component exceeds 100% overflow when padding is added

https://i.sstatic.net/W30tk.png Hey there, I've been encountering some issues with next js and styled-components. I have a parent component (sc-hgRfpC lbMBdR) with a width of 400px, and swap-div-5 with a width: 100%. However, when I add padding: 12px ...

cssnext.jsstyled-components

Minimize the use of globalized variables in your LESS CSS code

Is there a better way to avoid using globally diffused variables? I conducted a test with the following setup: _import.less @test: #FFF; _import2.less @test: #000; test.less @import (reference) "_import"; body { background: @test; } test2.less ...

cssless

When utilizing the build command in TailwindCSS, the resulting output file appears to be missing any content

I recently attempted to use TailwindCSS on my MacOS system. To install it, I used the command: npm install -D tailwindcss Following that, I generated the configuration file by executing the command: npx tailwindcss init I then proceeded to customize my ...

cssnpmtailwind-css

Having trouble with JavaScript in a project I'm trying to replicate

For my coding practice, I am working on a project where clicking on the images should change the main product displayed along with its color. However, nothing happens when I click on the products. Can anyone point out what I might be doing wrong? Here is ...

javascripthtmlcss

Utilizing Django for tables with over two items in a template

I've been on the lookout for a solution to create a Django template that can display more than just 2 values per row in a table. Imagine having a class with 5 attributes, and wanting these attribute values showcased in a table on your HTML page. Init ...

htmldjangodata-structuresmodel