Aligning items in a parent div to ensure that one element takes up the remaining space

I'm facing an issue with a container div called .audiojs that has a width of 100%. Inside this container, there are multiple elements with fixed widths and one element with a dynamic width (.scrubber with a width of 30%). The problem arises when I try different percentages for the .scrubber but can't seem to make it occupy the remaining width of the container without disrupting the layout on resizing. Is there a solution to ensure that the .scrubber (loading/progress bar) takes up the rest of the width within .audiojs without causing layout issues or affecting other elements with fixed widths?

JsFiddle: http://jsfiddle.net/w8GEK/3/

HTML

<div class="audiojs">
    <div class="play-pause"> 
    </div> 

    <div class="volume"> 
    </div> 

    <div class="time"> 
         <em class="played">00:00</em> 
    </div> 

    <div class="scrubber"> 
    </div> 

    <div class="time-2"> 
         <em class="duration">00:00</em> 
    </div> 

</div>

CSS

.audiojs { 
    width: 100%; 
    height: 40px; 
    background: #404040; 
    overflow: hidden; 
    font-family: 'Open Sans';
    font-weight: 300; 
    font-size: 10px; 
}

.audiojs .play-pause, .audiojs .volume { 
    width: 45px; 
    height: 40px; 
    margin: 0px; 
    float: left; 
    overflow: hidden;
    background: #262626;
    border: 1px solid #232323;
    border-bottom: 2px solid #232323;
    border-radius: 2px; 
}

.audiojs .volume {
    margin-left: 12px;
} 

.audiojs .scrubber { 
    position: relative; 
    float: left; 
    width: 30%; 
    background: #232323; 
    height: 10px; 
    margin: 15px 12px; 
    overflow: hidden;
} 

.audiojs .time, time-2 { 
    float: left; 
    height: 40px; 
    line-height: 40px;   
    color: #ddd;  
}

.audiojs .time {
    margin-left: 12px;
} 

.audiojs .time em, .audiojs .time-2 em { 
    color: #f9f9f9; 
    font-style: normal; 
}

Answer №1

In order to achieve the desired effect, my approach would be something similar to the following: http://jsfiddle.net/GPvLB/1/

To make the scrubber dynamic and adaptable to the width of the wrapper, I utilized absolute positioning for the scrubber element along with setting both left and right values. These values were determined by calculating the sum of the width (including margins/paddings) of adjacent elements to the scrubber.

The CSS code would look something like this:

.audiojs .scrubber { 
    position: absolute; 
    background: #232323; 
    height: 10px; 
    left: 160px;
    right: 60px;
    top: 15px;
} 

Key points to note include:
- Adding relative positioning to the wrapper (to serve as a reference for the absolute position)
- Floating "time-2" to the right side

This method is compatible with all browsers and does not rely on JavaScript for functionality...

Answer №2

If you're looking for a way to achieve this, check out this example: http://codepen.io/pageaffairs/pen/wzgjy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>

<style media="all">

.audiojs {overflow: hidden;}
.fixed {width: 200px; height: 100px; background: #e7e7e7; float: left; margin-right: 10px;}
.fluid {overflow:hidden;}

</style>

</head>

<body>
<div class="audiojs">
    <div class="fixed"></div>
    <div class="fixed"></div>
    <div class="fixed"></div>
    <div class="fluid">Fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div fluid div</div>
</div>

</body>
</html>

Answer №3

If you're looking to achieve a specific layout, one clever approach is to utilize the calc property for setting the width. Here's how it can be implemented:

width: calc(100% - 40px);

In this case, the 40px represents the total width of all your fixed-width elements adjacent to the dynamic width element.

Demo on JSFiddle

It's worth mentioning that although this technique works well in modern browsers, its compatibility with Internet Explorer is limited to versions 9 and above. For more details on browser support, check out this resource.

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

Having trouble with ':after' float setting not working? Let's explore alternative solutions!

Having trouble using the class selector and pseudo element :after with a float:none; setting that doesn't seem to be working. Any alternatives? ...

What is the proper way to incorporate an HTML inline tag within a string?

I am trying to incorporate an svg icon that symbolizes the Enter key in my design: <kbd class="DocSearch-Commands-Key"> <svg width="15" height="15" aria-label="Enter key" role="img"> ...

Adaptable backdrop picture within a full-width container

Currently experiencing an issue with my website that requires some assistance. When a user visits my site, the image of the 'cutlery pouch' will resize based on the size of the user's browser or monitor. However, some users are seeing the b ...

What is the best way to input an HTML element into AngularJS code?

I am looking to integrate the html element into my angularjs code. Within my HTML, I have elements such as data-form-selector='#linechart_general_form' and data-url="{% url 'horizon:admin:metering:samples'%}" that I need to access withi ...

Padding located within a div tag

As a novice in the world of HTML and CSS, I have designed a birthday card with a desired 50/50 split down the center. Placing an image on the left side was successful, however when trying to add text to the right, it ended up too close to the center line. ...

Ways to apply styles to the final element containing a specific class within a nested list using CSS

Styling the final HTML element with a specific css class presents challenges due to certain constraints that must be considered. In the website I'm currently working on, the navigation menu consists of multiple nested lists. When an element is clicke ...

Python Selenium is having trouble finding the elements

I've been struggling for hours to extract the specific text from a variety of elements on a website. I attached 2 images in hopes that they will help in identifying these elements by their similarities, such as having the same class name. The black un ...

"Bootstrap Toggle malfunctioning when switching between disabled and enabled states on a restricted set of

Having an issue with the Bootstrap Toggle Library in combination with Bootstrap 4. I am trying to restrict users from switching 'ON' more than a set number of elements. Here is the snippet of my HTML code: <div style="border:solid border-widt ...

Using the paragraph element within a flexbox forces the parent element to expand to the full width

I am attempting to design a straightforward layout where a heading, paragraph, and button are centered both horizontally and vertically on the page. My goal is for the .centered-div to match the width of the .heading. The issue arises when the paragraph t ...

Why am I unable to choose an element by its Id?

My goal is to pass an ID as an argument to a function in the following manner: HTML <button type="button" class="like btn" onclick="like('<%=postid%>')"> <svg id ='<%=likei ...

Is it beneficial to utilize CSS3 hardware acceleration translate3d for benchmarking purposes? Is it advisable to implement it on the body element

While browsing through content, I stumbled upon a query regarding the impact of transform: translate3d(0,0,0) or transform: translateZ(0) on enabling CSS3 hardware acceleration for animations across different platforms and browsers. It mentioned that combi ...

"Redirecting to an HTML page from the POST method is not supported in the Flask backend and Vanilla JS frontend setup

Utilizing the selected dropdown value from the frontend to perform calculations on the backend, resulting in an HTML page being returned. It's worth noting that no response is needed from the POST method, such as using return jsonify. Currently, I am ...

Assign a value to a jQuery variable from user input

Can someone assist me in setting an input field to the value of a jQuery variable? I am encountering difficulties with this task. My aim is to have equipment failure counts appear in an input textbox so that I can later write the value back to a table. Eac ...

Synchronize the widths of two tables using jQuery

Hi everyone, I need help with aligning two tables in jQuery. Is there a way to dynamically make the width of table 2 the same as table 1? If I could somehow set the width of the td elements in table 2 to match the width of table 1, they would line up per ...

CSS form not aligning properly within wrapper div and appears to be floating outside of it

I am in the process of creating a website that includes a wrapper div containing a: -Header -Content -Footer The issue I am encountering is when I insert regular text into the content section, everything displays properly and the background stretches s ...

Creating Flexible Divs with Gradient Background for Older Versions of Internet Explorer - IE8 and IE7

I'm attempting to achieve the following. https://i.stack.imgur.com/YYOZv.jpg The issue I am encountering is that the elements in row1 have a different gradient background compared to those in row2. Additionally, row1 is populated dynamically with c ...

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

Words fail to display

.sport { content: url("../img/sport.png"); background-color: rgba(0,0,0,1.0); top: 61px; height: 310px; width: 300px; position: absolute; margin: 0; left: 0; border-radius: 4px; overflow: hidden; } .sportsandactivis { background-colo ...

A flex container containing two divs each with a white-space:nowrap element set at 50% width

How can I create a parent div that contains two child divs, each with a width of 50% that adjusts based on content? The issue arises when one of the child divs has an h3 element with white-space:nowrap;, causing it to exceed the 50% width. I attempted to ...

Updating the iframe source without reloading the main page

Within my ASP.NET website, I have a page that contains an iframe inside an Ajax Update Panel. I am able to change the src attribute of the iframe using JavaScript, but the issue is that when the src attribute is modified, it causes the parent page to refr ...