Creating a design where the divs on the sides utilize all the available space using only CSS and HTML

I am trying to create a layout with three <div> elements - one centered at 960px width, and the other two on each side.

My goal is to have the side divs take up all available space except for the 960px occupied by the centered div. I managed to achieve this for the right div using overflow: hidden, but I'm facing difficulty with the left div.

<div id="left">leftt</div>
<div id="center">center</div>
<div id="right">right</div>

<style>
#center{
    width: 960px;
    float: left;
    height: 300px;
    background-color: #bbb;
}
#left{
    float: left;
    height: 300px;
    background-color: #ccc;
    width: ?;
}
#right{
    float: left;
    height: 300px;
    background-color: #ddd;
    width: ?;
}

<style>

This image illustrates what I am aiming for: https://i.stack.imgur.com/CgdLo.png

htmlcss

Answer №1

Utilize css tables for layout design (Even supported by IE8 - caniuse)

FIDDLE

1) Apply display:table to the container div

2) Use display:table-cell on child divs

3) Specify min-width:960px for the center div and width:50% for side divs

CSS

.container
{
    display: table;
    width: 100%;
}
#center{
    min-width: 960px;
    height: 300px;
    background-color: #bbb;
    display: table-cell;
}
#left{

    height: 300px;
    background-color: #ccc;
    display: table-cell;
    width: 50%;
}
#right{

    height: 300px;
    background-color: #ddd;
    display: table-cell;
    width: 50%;
}

Answer №2

When it comes to modern browsers like IE9+, Firefox, and Chrome, the HTML code would look something like this:

<body>
  <div id="left">leftt</div>
  <div id="center">center</div>
  <div id="right">right</div>
</body>

For styling in CSS, you can use the following:

#center{
  width: 960px;
  float: left;
  height: 300px;
  background-color: #bbb;
}
#left{
  float: left;
  height: 300px;
  background-color: #ccc;
  width: 100%;
  width: calc(50% - 480px);
}
#right{
  float: left;
  height: 300px;
  background-color: #ddd;
  width: 100%;
  width: calc(50% - 480px);
}

If you need support for IE8, you can achieve similar results using JQuery:

<script>
  $(function () {
    var documentWidth = $("body").width();
    $("#left").width((documentWidth - 960) / 2);
    $("#right").width((documentWidth - 960) / 2);
  });
</script>

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

Tips for including HTML tags in strings without causing issues with nested tags

I am struggling with a string that contains both text and HTML tags, specifically <a href=""></a> tags. My goal is to apply the "i" tag around the text outside of the "a" tags without creating nested tags like: <i><a href=""></a ...

pythonhtmlregex

Change the parent title attribute back to its original state

This is in contrast to queries similar to the one referenced here. In my scenario, there is a child element within a parent element (specifically a matSelect within a matCard, although that detail may not be significant) where the parent element has a set ...

htmlangulartypescriptproperty-binding

Mastering the Zurb Foundation equalized grid: aligning content at the bottom of a div within a grid cell

One common challenge is how to position content at the bottom of a div, but with Flexbox, it's becoming easier nowadays. In my case, I'm using the Zurb Foundation grid with equalisation. This equalisation is crucial because my cells have an imag ...

csszurb-foundation

Tips for shifting nested div containers to the left as the content expands

I have a div containing a dropdown menu, label, and button as shown below: <div class="container "> <div id="User"> <div id="BtnUser"> <div id="dropMe"> <div class="dropdown"> <a onclick="User ...

jqueryhtmlcss

Elevate the opacity with a hover effect

I am currently in the process of building my own website using siteorigin page builder on wordpress. One issue I have encountered is that they do not offer a hover option, so I had to create a custom CSS to add a hover effect on the background color. When ...

csswordpresshoverwidgetsiteorigin

Add the output of an SQL query to an HTML table using Powershell

I have multiple databases from various SQL Servers. I am attempting to output SQL data to an HTML table using Powershell from these different databases/SQL Servers, and then send it via email. Although my current script is functioning, it generates multip ...

htmlsql-serverwindowspowershellautomation

Creating distinct identifiers for CSS JQ models within a PHP loop

Can anyone assist me in assigning unique identifiers to each model created by the loop? I am currently looping through a custom post type to generate content based on existing posts. I would like to display full content in pop-up modals when "read more" i ...

javascriptphphtmljquerycss

What is the best way to maximize the use of the space available until reaching a div with varying dimensions each time

I have a div on the left that displays a name, and it can vary in length. On the right, there is another div with buttons. The number of buttons may change, so I am unsure how many will be displayed. Is there a way to utilize only CSS to make sure the fi ...

htmlcssposition

Having trouble getting my JavaScript code to function properly on Firefox browser

I have created a script where the cursor automatically moves to the next form field once it reaches its maximum length, in this case 1. Here is the JavaScript code: window.onload=function(){ var container = document.getElementsByClassName("container")[0] ...

javascripthtmlgoogle-chromefirefoxcross-browser

The (.svg) image does not cover the full width of the page

After creating an SVG image, I encountered a problem when trying to display it on a webpage. Even with the width value set to 100%, the image did not stretch all the way to the edges of the page, leaving small gaps at the edges. I attempted to switch the ...

htmlcss

Access in-depth data by clicking on a map to get detailed information

Recently, I took on the challenge of managing a golf club website after the original creator had to step away. One urgent issue I need to address is fixing a malfunctioning flash animation that provides information about each hole on the course. My plan is ...

javascriptcsshtmldhtml

Transparent dropdown elements using Bootstrap

I'm trying to incorporate a transparent bootstrap dropdown into my form. Specifically, I want the button itself to be transparent, not the dropdown list that appears when the button is clicked. Here's an example of what I currently have: https: ...

csstwitter-bootstrapdropdown

Can MUI 5 replicate the Emotions 'css' function through analog?

From what I've learned, MUI 5 utilizes Emotion for its styling framework. Emotion offers a convenient helper function called css, which generates a string - a class name that can be used as a value for the className property or any other relevant prop ...

cssmaterial-uiemotioncss-in-js

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows: <bar [type]="'health'" [percentage]="'80'"></bar> It is functional up to the point where I need to adjust different p ...

cssangulartypescriptanimation

Changing the shape of a background using CSS when hovering

My Bootstrap navigation has a unique setup, as shown below. I've observed that many users tend to only interact with the headings and ignore the submenus where the actual products are located. To address this issue, I want to change the design of th ...

javascripthtmlcss

Chrome displays radio buttons with a white background that is not intended. Firefox, on the other hand

The radio buttons in Google Chrome are displaying an unwanted white background around the circle, which is not the intended behavior as seen in Firefox. Please refer to these images for comparison. For a direct example of the issue on the page, please vi ...

cssgoogle-chromeradio-button

Tips for preventing CORS errors while rendering an image on a canvas

Working on a project for my coding bootcamp where I need to overlay bandaids on an image of a bear using canvas. The main challenge is to check the color of the area that users click to ensure they don't put bandaids on the white space around the actu ...

javascripthtmlcanvasdropbox

When my viewport's size is less than 998px, a blank space appears

While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without an ...

htmlcsswhitespaceviewport

Issue with PHP/HTML header() function not directing to URL page

Situation: In my member database overview, users can click on an 'update member' link in a table that redirects them to a page displaying the data of the selected member. The URL receives the parameter lid.php?lidnummer=4 (or any other ID). On t ...

phphtmlurlhttp-redirect

Tips for combining HTML and JavaScript on a WordPress site

As a WordPress developer who is still learning the ropes, I have come across a challenge with embedding html and JavaScript onto a page. Currently, I am in the process of redesigning a company website and one of the tasks involves integrating a calculator ...

javascriptphphtmlwordpress