Combining a left div, a right div, and a center div to equal 100% width. What is the best

I currently have a main div and three additional divs contained within it:

<div id="container" style="width:100%;">
        <div id="left" style="width:201px; float:left;">
         .... 
        </div>
        <div id="centre" style="float:left;">
         ....   
        </div>
        <div id="right" style="width:135px; float:right;">
         ....
        </div>
    </div>

My goal is to adjust the width of the centre div so that the total width of containerDiv equals the sum of leftDivWidth, rightDivWidth, and centreDivWidth;

cssxhtmllayouthtml

Answer №1

This layout design provides fixed right and left columns with a flexible center section:

CSS

<style type="text/css>
  #left {
    float: left;
    width: 201px;
    border: 1px solid red;
  }

  #centre {
    display: block;
    overflow: auto;
    border: 1px solid green;
  }

  #right {
    float: right;
    width: 135px;
    border: 1px solid blue;
  }
</style>

HTML

<div id="container" style="width:100%;"> 
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="centre">Middle</div>
</div>

Answer №3

In the past, I have adjusted the center element by giving it a left margin of 201px and a right margin of 135px. By setting its position to relative (instead of floating), it should now span the entire space between the left and right columns.

Unfortunately, I am unable to locate one of my previous code samples, so this is what I can offer for now. I hope this information proves useful!

Answer №5

In my perspective, the inability to mix relative and fixed width in CSS is a drawback.

A workaround could be structured like this:

<div id="container" style="width:100%;"> 
    <div id="left" style="width:20%; float:left;"> 
     ....  
    </div> 
    <div id="centre" style="width:65%; float:left;"> 
     ....    
    </div> 
    <div id="right" style="width:15%; float:right;"> 
     .... 
    </div> 
</div>

I would gladly embrace being proven wrong about this limitation.

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

The HTML code on the page does not match the code I see when inspecting it

I need to extract the cost savings and frequency of interruptions information from the table on https://aws.amazon.com/ec2/spot/instance-advisor/ using Python. After inspecting the website using Chrome's 'Inspect' feature, I discovered that ...

pythonhtmlpython-3.xweb-scraping

Ensuring Your IMG is Perfectly Centered in DIV Across all Browsers

I have tried all the tips from the top Google results, but I am still struggling to center an image within a div. For example, the popular tricks mentioned in this link: or http://www.w3.org/Style/Examples/007/center.en.html do not seem to work in IE 8. ...

css

Having trouble with an AJAX request to display a template in Flask

Imagine having two radio buttons labeled 1 and 2, along with some text at the bottom of a webpage. Initially, the text value is set to -1 and no radio buttons are selected. If one of the radio buttons is clicked, the text value should change to either 1 or ...

javascriptpythonjqueryhtmlflask

jQuery .click() only triggering upon page load

I've been searching all over the place and I just can't seem to find a solution to my specific situation. But here's what I'm dealing with: Instead of using inline HTML onclick, I'm trying to use jQuery click() like this $(docume ...

javascriptjqueryhtml

Get rid of emojis and unicode characters

My website and database are both configured to utf-8 and utf8mb4 encoding. While textareas accept utf-8 symbols and emojis without issue, I want to restrict certain input fields (such as name and address) to only allow basic text and numbers. This include ...

phpmysqlhtmlutf-8utf8mb4

Rapid HTML coding dilemma

Currently, I am in the process of quickly marking up my webpage. One issue I am facing is that I would like my title to be displayed below my <nav> tag instead of beside it. Can anyone provide guidance on how to achieve this? Here is the current HT ...

csshtml

Secret button that remains unresponsive upon initial click after materializing

I am facing a problem with my two buttons in the HTML code. One button is supposed to plot data, while the other is meant to download data. The issue arises when the plot button has data and the Excel download button should become visible. Although this fu ...

javascriptjqueryhtmlbuttonhidden

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

I'm currently utilizing intern.js for testing a web application. It allows me to run tests and generate screenshots in case of failures. My goal is to capture a screenshot of a specific element for conducting CSS regression testing with tools like res ...

cssseleniumscreenshotinternregression-testing

Trouble displaying image due to issues with javascript, html, Angular, and the IMDb API integration

I have been working on displaying images from the IMDb API in my project. Everything works perfectly fine when I test it locally, but once I deploy the project to a server, the images do not load initially. Strangely, if I open the same image in a new tab ...

javascripthtmllinuxangularjsimdb

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

A custom overlay has been designed and implemented. <div class="overlay modal" id="11"> <div class="background-overlay"></div> <div class="description"> <div class="hidden-xs"> <img src=' ...

javascriptjqueryhtmlcsstwitter-bootstrap

The alignment of margins appears as intended in Opera, Chrome, and IE, but unfortunately it does not

I have exhausted all possible options, but I am still struggling to get this page to appear correctly in Firefox. When you click inside the square, a menu with images should display on the right side. It is properly aligned in every browser except for Fire ...

cssfirefoxmargin

PHP is unable to properly process JSON data that contains HTML tags

I'm encountering an issue with my website that communicates with a Java REST server using Jersey. Everything is functioning properly except when I try to receive a JSON object with HTML tags embedded in the content. After running a println statement ...

javaphphtmljson

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

Disabling the submit button after submitting the form results in the page failing to load

I am encountering an issue with my HTML form that submits to another page via POST. After the form validates, I attempt to disable or hide the submit button to prevent double submission and inform the user that the next page may take some time to load. He ...

javascriptphpjqueryhtmlforms

Creating a Conditional Structure in HTML: A Step-by-Step Guide

My website is in need of a form that can identify the user's role based on their name input. This feature is essential for individuals with private roles. Is it possible to achieve this using HTML alone, without relying on JavaScript? If not, what st ...

html

Express identifies the user, however, the username is displayed exclusively on one specific page. This situation may indicate a potential cookie problem

I am in the process of developing an express app integrated with MongoDB. The issue I am facing involves a pug template for the navigation bar where I aim to display the user's name at the top upon logging in. Strangely, it only works on the page that ...

javascripthtmlnode.jscookiespug

Two headings using the same tags appear distinctively rendered

Recently, we added an iframe to our company's website that I have been helping manage. This iframe is responsible for handling requests sent to our organization. Interestingly, the headings on our website are styled using the following CSS: color: # ...

htmlcssiframe

The span's presence causes the neighboring span to shift downwards

HTML <span class="symbol">$</span> <span class="value">400</span> This code snippet displays the symbols "$" and "400" at the same level in the document. However, if we introduce some styling using CSS: .symbol { font-size: 2e ...

htmlcss

The issue with two different link styles displaying correctly in Internet Explorer but not in other browsers is that when a link is clicked, all links appear

Looking for a testing ground? Check out my website: While everything works smoothly on IE, I've noticed a glitch in other browsers. Clicking on one link causes all links on the page to appear as visited links. Take a look at the CSS code below: @ch ...

htmlcssgoogle-chromefirefox

Angular 5: Autosuggestion feature functions perfectly in Chrome, experiencing difficulties in Internet Explorer

I have integrated an autosuggestion feature using Angular 5, pulling suggestion values from an API. Here is the HTML Code : <div class="col col-lg-4"> <label for="insuranceCompanyName"> Insurance Company Name </label> ...

htmlangularangular5datalistautosuggest