Position the div in the center of a container that is 100% width and has floating elements with dynamic widths

I am looking to align 3 divs inside a container div, with the arrangement of [LEFT] [CENTER] [RIGHT]. The container div should be 100% wide without a fixed width, and I want the center div to stay centered even when resizing the container. The left and right divs should expand or contract along with the container, while the center div has a fixed width. Currently, I have implemented the following code: 

<div style="width: 100%">
    <div style="float: left; height: 50px;"></div>
    <div style="float: right; height: 50px;"></div>
    <div style="margin: 0 auto; height: 50px; width: 500px;"></div>
</div>
However, the issue is that the left and right divs are not visible due to the lack of a set width. Do you have any suggestions on how to achieve this layout?

javascriptjqueryhtmlcssalignment

Answer №1

If you want to achieve this layout, CSS alone won't cut it. JavaScript is required. In the code snippet provided, the middle div remains fixed at 400px while the remaining space is divided between the left and right divs. This functionality can be implemented using jQuery.

function calculateWidth() {
    var windowWidth = $(window).width();
    var remainingWidth = windowWidth - $('.div2').width();
    $('.div1, .div3').css('width', remainingWidth / 2);
}
calculateWidth();
$(window).resize(calculateWidth);

To see a working demo, visit http://jsfiddle.net/Y9Bn8/4/

Answer №2

If you are looking to avoid using javascript, another approach would be to set the center div with an absolute position and include two additional divs as buffers within the left and right divs:

<div style="width: 100%; text-align:center">
    <div style="width:50%; height: 50px; float:left">
        <div style="width:250px; height: 50px; float:right"></div>
    </div>
    <div style="margin-right:auto; margin-left:auto; position:absolute; left:0; right:0; width: 500px;height:50px;"></div>
    <div style="width:50%; height: 50px; float:right">
        <div style="width:250px; height: 50px; float:left"></div>
    </div>
</div>

Answer №3

If your main focus is on Mozilla and WebKit, then delving into the realm of the Flexible Box Model could be beneficial:

This approach can effectively address various centering challenges using CSS alone. Make sure to familiarize yourself with the documentation and experiment with different settings to grasp its functionality fully.

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

Using Choices.js to inject live data into the select dropdown options

I am currently utilizing Choices.js for multi-select functionality and incorporating a select with a search box. Even though I am using Angular.js to populate the data, it does not appear to be functioning correctly. Is there anyone who can assist me in dy ...

javascriptangularjsajax

The issue of the footer kicking out of place in the HTML layout was successfully resolved after

I am in the process of creating a simple footer that will always stay at the bottom of the page. The content on the page will not exceed the screen size, eliminating the need for scrolling. (There are a total of 5 HTML pages, and I want the footer and head ...

htmlcssfooterfixed

Troubleshooting Google Authorization Issue in Angular 17: How to Fix the Error TS2304: 'google' Not Found in Angular 17

I am encountering an issue while attempting to integrate Google Auth into my Angular(+Express) application using the Google Identity Services library. Despite following the instructions provided in the Google tutorial, I am facing the error: "[ERROR] TS230 ...

javascripttypescriptgoogle-apigoogle-oauthangular17

RadScheduler refresh rate

Currently I am incorporating RadScheduler into my project. The scheduler requires a regular update, so I have implemented a JavaScript function with an interval to call rebind() on the RadScheduler every 60 seconds. However, an issue arises when the user o ...

javascriptasp.netteleriksetintervalradscheduler

Incorporating regular expressions to extract a specific string from a URL is a requirement

Can anyone assist with extracting a specific string using regex in TypeScript? I have the following URL: https://test.io/content/storage/id/urn:aaid:sc:US:8eda16d4-baba-4c90-84ca-0f4c215358a1;revision=0?component_id=e62a5567-066d-452a-b147-19d909396132 I ...

javascriptregextypescript

Tips for extracting data from a PHP loop and displaying it in a div element

When I click on a PHP while loop, I want to change the value of a div. Here is my PHP code: <?php $query = mysql_query("select * from tbl_sub_product where product_id='$id'"); while($row=mysql_fetch_array($query)) { ?> <div>< ...

javascriptphpjqueryajax

Testing the unit with a customized header in the interceptor

I've been struggling to execute a unit test within an Angular 6 interceptor, but despite numerous attempts, I keep encountering the following error: Error: Expected one matching request for criteria "Match by function: ", found none. I'm rela ...

javascriptangularunit-testingjasmineangular-http-interceptors

Enhancing CKEditor: Inserting new elements upon each dialog opening

I am facing a challenge where I need to dynamically add varying numbers of elements to a dialog window each time it is opened. Below is the code I am working with: CKEDITOR.on( 'dialogDefinition', function(ev) { var dialogName = ev.data.name ...

javascriptdialogckeditor

Detecting whether a browser is capable of supporting dark mode

One method to determine if dark mode is active is by using prefers-color-scheme: dark: const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; Is there a way to detect if a browser supports dark mode as well? (By "supports ...

javascriptcssbrowserdarkmode

Unable to locate the element within the Datalist using jQuery by its ID

How can I make the function $('#ctl00_ContentPlaceHolder1_ShowListing_DataList1$3$0$enquire').click(function() { ... } work when clicking on any button within the DataList? I am looking to use JQuery to find the buttons by their ID and trigger t ...

jquerytriggersjquery-selectorsdatalist

Complete the execution of the jQuery function

It may seem like a simple idea - to stop executing a function, just use return false, return, or call on a function like undefined. However, in this case, it's not that straightforward. I'm working on a website project that includes a snake game ...

jqueryhtml

Guide on altering the cell's background hue depending on its value through javascript

I'm dealing with a table that has 3 columns: field1 is a Category field2 and field3 contain Measures (specifically integers 1, 2, 3, 4, and 5). Is there a way to use Javascript to conditionally format the background color of cells in the table hol ...

javascriptphphtmlcssformatting

Ways to dynamically toggle visibility and hide elements by clicking outside the specified div

I have a div that, when clicked, displays a contact us form. This form toggles between being visible and hidden. How can I make it hide when clicked on another part of the document? Here is the code: function showContactForm(){ var formWidth = &apos ...

javascriptjqueryhtml

uib-datepicker-popup allowing for changing minimum mode dynamically

Is there a way to dynamically set the minMode of an Angular Bootstrap Datepicker? I managed to achieve this using the following code: <input type="text" ng-model="myDate" uib-datepicker-popup="{{datepickerFormat}}" datepicker-options="{& ...

javascriptangularjsdatepickerangular-ui-bootstrap

Exploring the gridview with JQuery to iterate through and verify if any checkboxes have been selected

I am currently working on a jQuery-based application. In this application, I have an ASP.net GridView that contains checkboxes in each row. My goal is to determine whether any of the checkboxes are checked or not. Below is the code snippet where I loop thr ...

javascriptjquerygridview

`The ultimate guide to fixing the node.js ENOENT error`

Currently, I am utilizing express.js to execute this code snippet: var repl = require("repl"); var express = require('express'); var app = express(); var server = require('http').createServer(app); var io = require('socket.io&apos ...

javascriptnode.jsexpress

Show the selected row's data from a gridview in a dropdown menu

I am facing an issue with displaying the selected row value in a dropdown list. Can anyone assist me with this problem? Here is an example scenario: https://i.sstatic.net/RYssP.png Upon looking at the image, you will notice that the selected row's ...

c#htmlasp.net

Utilizing jQuery or Javascript to obtain the title of the current webpage, find a specific string within it, and then apply a class to the corresponding element

Let's imagine I start with this: <title>Banana</title> and also have some navigation set up like this: <ul id="navigation"> <li> <a href=#">Banana</a> </li> </ul> Upon loading the sit ...

javascriptjqueryhtmlcss

Ways to transition to the subsequent page in Selenium WebDriver following the click of the submit button

https://i.sstatic.net/QWcHm.jpg After successfully automating the process of filling in a textbox and clicking the "proceed with booking" button using a submit() command, I encountered an issue. The HTML code does not provide a URL that can be used in the ...

pythonhtmlcssseleniumwebdriver

Retrieving a file URL from Sanity within a blocks array

I've been working on a website with Next JS and using Sanity as the CMS. While Sanity has schemas for images, I ran into an issue when trying to handle videos. The documentation recommends using GROQ queries to convert file URLs at the request level, ...

javascriptnext.jssanitygroq