Setting the width of a parent div tag in CSS based on its children tags

Question

Setting the width of a parent div tag in CSS based on its children tags

My goal is to have a parent div tag with several children div tags placed horizontally. Since the number of children tags is not known in advance, I cannot set the width of the parent div tag using CSS alone, so I am using JavaScript for this purpose.

var cnt = $("#parent div").length; // Get total count of children tags
var parent_width = cnt * 102 ;  // Calculate parent tag width based on children tag width and borders

$("#parent").css({
    width: parent_width+"px"
});

<div id="parent" style="height: 100px; background-color: #090">
    <div style="height: 100px; width: 100px; background-color: #009; border: 1px solid #ccc; float: left">
    </div>
    <div style="height: 100px; width: 100px; background-color: #009; border: 1px solid #ccc; float: left">
    </div>
</div>

While the current solution works, I believe there might be a way to achieve this layout without using JavaScript, relying solely on CSS. Can someone please guide me on how to do this?

javascript jquery html css

Answer 1

Answer №1

Solution:

HTML

<div id="container">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

#container {
    display: flex;
    justify-content: space-around;
}

#container > div {
    height: 100px; 
    width: 100px; 
    background-color: #009; 
    border: 1px solid #ccc; 
}

Result: http://jsfiddle.net/xyz123/

Answer 2

Solution:

HTML

<div id="container">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

#container {
    display: flex;
    justify-content: space-around;
}

#container > div {
    height: 100px; 
    width: 100px; 
    background-color: #009; 
    border: 1px solid #ccc; 
}

Result: http://jsfiddle.net/xyz123/

Answer 3

Answer №2

To ensure the children fit into the parent element, apply the following CSS to the parent:

#container
{
  background-color:#090;
  height:100px;
  float:left;
}

This will automatically adjust the width of the parent div to accommodate its children.

Additionally, remember to set the float property on the child div elements if you want them to align in the same line.

Answer 4

To ensure the children fit into the parent element, apply the following CSS to the parent:

#container
{
  background-color:#090;
  height:100px;
  float:left;
}

This will automatically adjust the width of the parent div to accommodate its children.

Additionally, remember to set the float property on the child div elements if you want them to align in the same line.

Answer 5

Answer №3

Use inline-block for display property.

If you need help, I can assist you with it.

To implement this in your project, apply the following CSS to the parent element:

#container {
    height: 100px; 
    background-color: #090;
    display: inline-block; 
}

#container > div {
    height: 100px; 
    width: 100px; 
    background-color: #009; 
    border: 1px solid #ccc; 
}

<div id="container">
    <div></div>
    <div></div>
    <div></div>
</div>

Answer 6

Use inline-block for display property.

If you need help, I can assist you with it.

To implement this in your project, apply the following CSS to the parent element:

#container {
    height: 100px; 
    background-color: #090;
    display: inline-block; 
}

#container > div {
    height: 100px; 
    width: 100px; 
    background-color: #009; 
    border: 1px solid #ccc; 
}

<div id="container">
    <div></div>
    <div></div>
    <div></div>
</div>

Setting the width of a parent div tag in CSS based on its children tags

Answer №1

Answer №2

Answer №3

Similar questions

Transformations in Object Attributes Following an AJAX Submission

The currentViewData property of the model is not defined, resulting in a TypeError when implementing the Hierarchical Grid and accessing the Child Grid

Invoking a REST API synchronously using JavaScript

Creating a customized Axios instance in Typescript can provide more flexibility and control over

Developing tabbed sections in XSLT

Trigger a Jquery sound when an HTML result is found and displayed

Oops! There was an issue with the form field - make sure to include a MatFormFieldControl for proper validation on the

What is the best way to refactor the code below?

Drag items with jQuery without needing to click on them

Can you clarify the purpose of response.on('data', function(data) {}); in this context?

Checking the Focus of an Element in Vue.js

Modifying the geometry of a three.js object

Leveraging entities within entities with connections and seeding data in Nest JS / TypeORM

Guidelines on resolving the issue of Unsupported platform for [email protected]: requested {"os":"darwin","arch":"any"} (existing: {"os":"win32","arch":"x64"})

Exploring custom JavaScript with Construct 2's generated code

What is the best way to ensure that a task is performed only once the DOM has finished loading following an AJAX request

adjust variable increment in JavaScript

There seems to be a column in the MySQL INSERT query that is unidentifiable and does not exist in the list of fields

Having trouble with flash messages in Node.js?

The default choice vanishes once a non-empty option is chosen