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

Question

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

html css

Answer 1

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

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 3

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>

Answer 4

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>

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

Answer №1

CSS

Answer №2

Similar questions

Issue with implementing styles on Navbar React component

Tips for arranging div elements in a grid-like matrix layout

Can JavaScript be used to upload a file directly to memory for processing before transferring it to the server?

Can you explain the distinction between using .hover and :hover?

Tips for making nested sliding divs within a parent sliding div

PHP is not processing the HTML form I submitted

Click on the header to activate the accordion link with a trigger

Is there a way in AngularJS to set all radio buttons to false when one is chosen as true?

What could be causing my website to function flawlessly in Firefox but not in Chrome or Internet Explorer?

Error: The function execute_script() is expecting between one and two arguments, however three arguments were provided

How to achieve divs with see-through text using CSS?

The website functions properly with Live Server, but encounters issues when launched from the Files directory

Can someone explain why my button icons are not aligning to the center properly?

Regex: Identifying all URLs except for those with ".js" or ".css" included

Styling tip: Distance the tooltip from its parent element when scrolling through a list

Trouble arises when trying to link IE7 with jQuery

Issue with menu height persisting while resizing screen

Tips for adjusting the positioning of a div element in a responsive design

What is the best way to include a targeted href link within HTML code?

Extension for Chrome