Adjust the wrapper width to fit its content size

My current setup looks like this:

<div id="wrapper">
    <div class="column1"></div>
    <div class="column3"></div>
    <div class="column2"></div>
</div>

#wrapper {
    position:absolute;
}

Each of the "column" elements has a distinct width and is styled with float: left. Collectively, the 3 columns are x pixels wide; however, if I were to add another column, I want the wrapper itself to adjust its width accordingly.

Therefore, I am looking for a way to dynamically calculate and set the width of the wrapper based on the total width of the contained columns using JavaScript.

javascriptjquerycss

Answer №1

$("#container").width(function() {
    var totalWidth = 0;
    $(this).children('[class^="col"]').each(function() {
        totalWidth += $(this).width();
    });
    return totalWidth;
});​

Answer №2

Avoid implementing floats, opt for display:inline-block instead (View Demo)

Answer №3

let totalWidth = 0;
$("#wrapper > div").each(function(idx) {
  totalWidth += $(this).outerWidth();
});
$("#wrapper").width(totalWidth);

Answer №4

Check out this fiddle: http://jsfiddle.net/SaraSmith/qWZTx/

let totalHeight = 0;
$("section#container > div").each(function(idx) {
    totalHeight += parseInt($(this).outerHeight(true), 10);
});

$("section#container").height(totalHeight);​

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

Ways to switch out event listener when button is deactivated

I find myself in a situation where I need to switch all unauthorized controls on my UI from a hidden state to a disabled state. Additionally, I want to add a tooltip with unauthorized text and have the control display this text when clicked. While I am ab ...

javascriptjqueryhtmlasp.netonclick

Having trouble with multiple selectors not functioning in a jQuery click event. I attempted to use merge() to combine them, which worked successfully for the first two

Having trouble getting multiple selectors to work in a jquery click event. I attempted using .merge() but it only works for the first two selectors. var navLink = $("#carbonNavbar ul li a[href^='#']"); var sideIco = $("#sideIcons a[href^='# ...

javascriptjqueryjquery-selectors

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

htmlcss

Is there a way to transform a PNG image binary string into base64 encoding without saving it to disk?

After successfully passing an image as a binary string out of puppeteer's page.evaluate() function back to node.js, I used the following code: async function getBinaryString(url) { return new Promise(async (resolve, reject) => { const ...

javascriptnode.jspuppeteer

Toggle a v-if variable within the created() lifecycle hook in the VUE 3 framework

I'm working on a component with 3 buttons, where initially only 2 are visible. <template> <button v-show="!showLogout" @click="login('google', 'profile, email')"> Google </button> &l ...

javascriptvue.jsvue-componentvuejs3hello.js

Issue with retrieving attributes in the directive

One of the challenges I encountered is incorporating a directive that wraps the jQuery FullCalendar plugin into my project. Here is how I implement the directive: <div sg-calendar format-column-header-month='dddd' format-co ...

javascriptangularjsangularjs-directiveangularjs-scope

Utilize Ajax and PHP to transfer User ID to the Database

One issue I'm facing is that I have a page where my users' posts are displayed, and each post has a connect button in the form of form input. The poster's id is associated with each post. I want it so that when a user clicks on the connect b ...

javascriptphpjqueryajaxsqlite

"Utilize an Ajax form with the 'post' method

I'm facing an issue with the AJAX form as it keeps throwing an error. I really need it to function properly when a button is clicked, refreshing all data in the process. <form name="form" id="form" class="form"> ...

javascriptjqueryajax

Struggling to display the Three.js LightMap?

I'm having trouble getting the lightMap to show on my mesh. Here's the code I'm using: loader.load('model.ctm', function (geometry) { var lm = THREE.ImageUtils.loadTexture('lm.jpg'); var m = THREE.ImageUtils.loadT ...

javascripthtmlthree.js

Is it normal for CSS to have white spaces?

My preference for coding is: h1 {color:red;} however, on w3schools, they format it like this: h1 {color: red;} Will both methods yield the same end-results? ...

css

On larger screens, display a Vertical Carousel featuring multiple items. However, on mobile devices, showcase a single image using the default

I am looking to create image previews that adjust based on the screen size for a responsive design. The desktop view should display like the image linked below: https://i.sstatic.net/YptF6.png On mobile, I want it to default to the bootstrap view, as sho ...

jqueryhtmlcssbootstrap-4

The renderValue property is malfunctioning in the Material-UI native Select component

Whenever I utilize the native prop in the MUI Select component, the renderValue prop fails to function properly. Additionally, if I attempt to assign a custom value to the value prop, it does not display. Take a look at the code snippet below: const [selec ...

javascriptreactjsmaterial-ui

"Utilizing jQuery to target and manipulate the outer HTML content

Picture this scenario: <div id="xxx"><p>Hello World</p></div> When the .html function is called like this: $("#xxx").html(); The output will be: <p>Hello World</p> However, I actually need to retrieve: <div id= ...

jquery

Navigating through designated interval inside js es6 map

I am currently working with a JavaScript map structure that is sorted based on time, storing object states. Map(key:time(inMilli), value: {object attributes}) My goal is to efficiently retrieve a collection of all values within a specific start and e ...

javascriptes6-map

What techniques can I implement using JavaScript or CSS to create a slightly transparent effect on my text?

I am currently developing a website that features changing background images. I am looking to have the text on the site mimic the color of the backgrounds, but not so much that it becomes difficult to read. How can I make the text transparent in this man ...

htmlcsstexttransparent

execute bower install for the specified bower.json file

Let's say my current working directory is c:\foo\ while the script is running. I want to execute bower from there for the c:\foo\bar\bower.json file. This can be done in npm by using npm install --prefix c:\foo\bar. ...

javascriptnode.jsnpmbowerbower-install

Can anyone explain to me why I am unable to retrieve the pricing information from the Nike website using selenium and Python?

I've been working on a Python script that scrapes the prices of trainers from the Nike website and saves them into a CSV file. Initially, I tried extracting the price data from the HTML element, but that didn't work. I then switched to using CSS ...

pythoncssselenium-webdriverxpathweb-crawler

What is the best way to interpret a JSON object?

Trying to extract data from a PHP web-service using JavaScript, an error occurred in my project while parsing JSON. The PHP web service code is as follows: <?php header("Content-Type:application/json"); try { if(!empty($_POST['mobile_number& ...

phpjqueryjson

The previous state is retained by useState, rather than updating to the current value

Hello, I'm currently learning about React and its functionality. My project involves having 2 select inputs that should update based on each other's value changes. However, I've noticed that after using setOptions to update the filtered va ...

javascriptreactjsstate

Typescript throwing an error stating "Error parsing: Enum member names must not begin with lowercase letters 'a' through 'z'"

Within my typescript project, I am utilizing the following enum type: export enum ModelAttributeTypes { binary = 'binary', binarySet = 'binarySet', bool = 'bool', list = 'list', map = 'map', num ...

javascripttypescriptenums