Using HTML and CSS, create a layout with three columns where the side columns are flexible in width and the middle

Question

Using HTML and CSS, create a layout with three columns where the side columns are flexible in width and the middle

Currently, I am facing an issue with the header design of my website. The layout consists of 3 columns of divs and my goal is to have a middle column with a fixed width of 980px. In addition, I want the left side of the header to span across the entire browser window with a blue background color, while the right side should extend to the edge of the browser with a black background color.

The desired look is as follows:

<------------------------------[blue][center header][black]---------------------------->

After conducting some research, I came across examples featuring two columns where the left column has a fixed width and the right fills up the remaining space. I am curious how this concept can be adapted to fit my current situation.

Would the solution involve code similar to the following:

<div style="width:100%;">
     <div style="display:table-cell; background-color:blue;"></div>
     <div style="width: 980px;">my header</div>
     <div style="display:table-cell; background-color:black;"></div>
</div>

I appreciate any guidance or feedback on this matter!

html css width fill

Answer 1

Answer №1

A straightforward fix - essentially maintaining your exact styling, but incorporating another block within the central table-cell element, such as this span here:

<div class="wrapper">
   <div class="left"></div>
   <div class="center"><span>my header</span></div>
   <div class="right"></div>
</div>

I have transferred all inline styles to a separate CSS block and utilized class selectors:

.wrapper {
    display:table;
    width:100%;
}
.left {
    display:table-cell;
    width:50%;
    background-color:blue;
}
.right {
    display:table-cell;
    width:50%;
    background-color:black;
}
.center {
    display:table-cell;
}
.center span {
    display:inline-block;
    width:900px;
}

Here is a jsfiddle

Furthermore, I adjusted the center to be much narrower for clearer visualization: jsfiddle

Trust this guidance proves helpful =)

Answer 2

A straightforward fix - essentially maintaining your exact styling, but incorporating another block within the central table-cell element, such as this span here:

<div class="wrapper">
   <div class="left"></div>
   <div class="center"><span>my header</span></div>
   <div class="right"></div>
</div>

I have transferred all inline styles to a separate CSS block and utilized class selectors:

.wrapper {
    display:table;
    width:100%;
}
.left {
    display:table-cell;
    width:50%;
    background-color:blue;
}
.right {
    display:table-cell;
    width:50%;
    background-color:black;
}
.center {
    display:table-cell;
}
.center span {
    display:inline-block;
    width:900px;
}

Here is a jsfiddle

Furthermore, I adjusted the center to be much narrower for clearer visualization: jsfiddle

Trust this guidance proves helpful =)

Answer 3

Answer №2

Regrettably, there is no seamless method to achieve this with wide cross compatibility support. The CSS spec for display known as flexbox could provide a beautiful and elegant solution, but its current support is very limited. Here are some resources on flexbox for further reading...

http://css-tricks.com/old-flexbox-and-new-flexbox/

In the meantime, you can create the desired layout using basic CSS techniques that involve absolute positioning of your middle div.

Here is the JSFiddle: http://jsfiddle.net/CW5dW/

The CSS code is as follows:

.left {
    width: 50%;
    height: 300px;
    float: left;
    padding-right: 160px;
    box-sizing: border-box;
    background: red;
}

.right {
    width: 50%;
    height: 300px;
    float: right;
    padding-left: 160px;
    box-sizing: border-box;
    background: blue;
}

.middle {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 50%;
    padding: 10px;
    margin-left: -150px;
    box-sizing: border-box;
    background: orange;
}

You might be wondering what's happening here?

In essence, by removing the middle div from the document flow, we can float the left and right divs with a width of 50% each to fully occupy the browser window. We then position the middle div to take up 300px (or 980px in your case) at 50% from the left edge. To center it, we use a negative margin equal to half its width. Additionally, we add padding to the left and right sides of the left and right divs to prevent content overlap with the middle div.

Answer 4

Regrettably, there is no seamless method to achieve this with wide cross compatibility support. The CSS spec for display known as flexbox could provide a beautiful and elegant solution, but its current support is very limited. Here are some resources on flexbox for further reading...

http://css-tricks.com/old-flexbox-and-new-flexbox/

In the meantime, you can create the desired layout using basic CSS techniques that involve absolute positioning of your middle div.

Here is the JSFiddle: http://jsfiddle.net/CW5dW/

The CSS code is as follows:

.left {
    width: 50%;
    height: 300px;
    float: left;
    padding-right: 160px;
    box-sizing: border-box;
    background: red;
}

.right {
    width: 50%;
    height: 300px;
    float: right;
    padding-left: 160px;
    box-sizing: border-box;
    background: blue;
}

.middle {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 50%;
    padding: 10px;
    margin-left: -150px;
    box-sizing: border-box;
    background: orange;
}

You might be wondering what's happening here?

In essence, by removing the middle div from the document flow, we can float the left and right divs with a width of 50% each to fully occupy the browser window. We then position the middle div to take up 300px (or 980px in your case) at 50% from the left edge. To center it, we use a negative margin equal to half its width. Additionally, we add padding to the left and right sides of the left and right divs to prevent content overlap with the middle div.

Answer 5

Answer №3

This response serves as an extended commentary to @Michael's original post, rather than a direct answer. I have provided another response containing a jQuery solution.

In reference to @Michael's well-organized solution, there is a minor issue that may arise when the height declaration is removed (which is highly likely for the OP). This method heavily relies on ensuring that all column backgrounds align perfectly at their bottom edge to maintain design cohesion. If the OP's design does not include backgrounds behind the columns, then this solution should work without any problems. However, if background elements are necessary (as indicated by the question), complications may arise. There are two possible solutions to consider...

Implementing a simple JavaScript code that scans the page for column length, identifies the longest one, and adjusts all shorter columns to match the maximum length.
The alternative (and potentially better) solution involves inserting a background within your <div> element with pre-existing columns set up on it (the background only needs to be 1px in height, presumably) - ensure that the central white band is 980px wide while the side columns extend past a thousand pixels or so to accommodate various browser sizes.

Answer 6

This response serves as an extended commentary to @Michael's original post, rather than a direct answer. I have provided another response containing a jQuery solution.

In reference to @Michael's well-organized solution, there is a minor issue that may arise when the height declaration is removed (which is highly likely for the OP). This method heavily relies on ensuring that all column backgrounds align perfectly at their bottom edge to maintain design cohesion. If the OP's design does not include backgrounds behind the columns, then this solution should work without any problems. However, if background elements are necessary (as indicated by the question), complications may arise. There are two possible solutions to consider...

Implementing a simple JavaScript code that scans the page for column length, identifies the longest one, and adjusts all shorter columns to match the maximum length.
The alternative (and potentially better) solution involves inserting a background within your <div> element with pre-existing columns set up on it (the background only needs to be 1px in height, presumably) - ensure that the central white band is 980px wide while the side columns extend past a thousand pixels or so to accommodate various browser sizes.

Answer 7

Answer №4

Alright, check out my solution. I've created a simple three-column fixed width layout that works for all users and adjusts for those with JavaScript enabled (which is the majority). This solution avoids any quirks that can arise from using more complex CSS techniques like absolute positioning or fixed heights.

Take a look at the demo here: http://jsfiddle.net/vuary/

You can inspect the HTML, CSS, and jQuery in the fiddle to see how it's set up. It's pretty basic. Here's a snippet of the jQuery code:

$(document).ready(function(){

    // Get the browser window width
    var docuWidth = $(window).width();

    // Get the central column width specified in the CSS
    var centerWidth = $('#center').width();

    // Calculate the side column widths
    sideColWidth = (docuWidth - centerWidth) / 2;

    // Set the width of the side columns
    $('#left,#right').css({
        width:sideColWidth+'px'
    });
})

UPDATE

I've converted the jQuery code into a function that runs when the document is ready and also on resize to ensure everything stays in place:

http://jsfiddle.net/aKeqf/

Answer 8

Alright, check out my solution. I've created a simple three-column fixed width layout that works for all users and adjusts for those with JavaScript enabled (which is the majority). This solution avoids any quirks that can arise from using more complex CSS techniques like absolute positioning or fixed heights.

Take a look at the demo here: http://jsfiddle.net/vuary/

You can inspect the HTML, CSS, and jQuery in the fiddle to see how it's set up. It's pretty basic. Here's a snippet of the jQuery code:

$(document).ready(function(){

    // Get the browser window width
    var docuWidth = $(window).width();

    // Get the central column width specified in the CSS
    var centerWidth = $('#center').width();

    // Calculate the side column widths
    sideColWidth = (docuWidth - centerWidth) / 2;

    // Set the width of the side columns
    $('#left,#right').css({
        width:sideColWidth+'px'
    });
})

UPDATE

I've converted the jQuery code into a function that runs when the document is ready and also on resize to ensure everything stays in place:

http://jsfiddle.net/aKeqf/

Using HTML and CSS, create a layout with three columns where the side columns are flexible in width and the middle

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Border only at the bottom of the outline

What is the best way to save geolocation coordinates in a Javascript array?

Access the website by logging in with idhttp

Using the cordova-plugin-file to access and play video files stored on an external SD

InvalidSelectorError: The specified selector is not valid //button[contains(., 'buttonText')] while running JavaScript code

What is the process of adding information to a database from a table using JSP?

Is it possible to include a class in a 'label' element?

The font size of the textarea dynamically adjusts based on the size of the screen

Shift the sleek navigation arrows to the interior of the slides

Concealing Bootstrap 3 elements on a split-screen layout

observing numerous directories in Sass

Guide to customizing color themes using Twitter Bootstrap 3

What is the proper way to align text based on the text above using CSS?

Creating dynamic email templates in Node.js

A guide on incorporating a customized Google map into your website

Design a Bootstrap dropdown menu featuring various options within an icon container

Techniques for Adding Background Color to Fieldset Border

Arranging my form input fields in a neat vertical stack

Is there a way for me to produce a random choice depending on the option selected by the user in the <select> menu?

Utilizing ng-bind-html alongside ng-controller