Styling the sacred grail layout with organized columns

Question

Styling the sacred grail layout with organized columns

In my search for answers, I have come across many general responses to this common question. However, none of them address the specific constraints that I am facing with this version.

The task at hand is to implement the holy grail layout, but with a key requirement: The columns must maintain their order from left to right, L (left), C (center), R (right), without relying on absolute positioning.

Another important consideration for me is browser compatibility. While I do not need to support outdated browsers like IE6, ensuring functionality for at least IE7 is preferable. Thus, using the calc() CSS function is not an option.

The standard practice, as seen in the A List Apart article, involves arranging the columns in the order of C-L-R for SEO purposes. Many argue that this helps with search engine optimization and visual display. However, when it comes to accessibility tools like JAWS, the DOM order matters more.

Below is a typical markup structure for L-C-R:

<div class="wrapper">
    <div class="container">
        <div class="column-l">
            <div class="cell">Column L</div>
        </div>
        <div class="column-c">
            <div class="cell">Column C</div>
        </div>
        <div class="column-r">
            <div class="cell">Column R</div>
        </div>
    </div>
</div>

Accompanying this structure is some CSS styling:

.wrapper {
    width: 100%;
}
.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.cell {
    padding: 1em;
}

My goal is to fix the widths of .column-l and

.column-r</code while keeping <code>.column-c

fluid. By floating .column-l left and applying a margin left to .column-c, these two columns fall into place as intended:

.column-l {
    width: 300px;
    float: left;
}
.column-c {
    margin-left: 300px;
}

The issue arises with .column-r. Despite attempting various adjustments, such as applying a float right or a margin-right property, it does not align correctly with the other columns. Even if a margin-right is given to .column-c, .column-r still refuses to cooperate.

html css accessibility multiple-columns

Answer 1

Answer №1

.column-l {
    width: 300px;
    background: red;
    display:table-cell;
}
.column-c {
    background: green;
    display:table-cell;
}
.column-r {
    width: 300px;
    background: blue;
    display:table-cell;
}

Is this solution helpful? No need for floating elements, the left and right columns are fixed at 300px width each, while the center column expands to fill the remaining space. Additionally, all columns have the same height.

Answer 2

.column-l {
    width: 300px;
    background: red;
    display:table-cell;
}
.column-c {
    background: green;
    display:table-cell;
}
.column-r {
    width: 300px;
    background: blue;
    display:table-cell;
}

Is this solution helpful? No need for floating elements, the left and right columns are fixed at 300px width each, while the center column expands to fill the remaining space. Additionally, all columns have the same height.

Answer 3

Answer №2

Apply display:table to the main container and use display:table-cell; for the columns

Check out this JSFIDDLE demo

Answer 4

Apply display:table to the main container and use display:table-cell; for the columns

Check out this JSFIDDLE demo

Answer 5

Answer №3

This answer has been improved. Here's the original version.

Presented below is a simple layout pattern that was constructed with the help of chat participants and some experimenting. It fulfills the requirements outlined in my initial query, although it does involve using one non-semantic <div> (which is an improvement from the previous solution). However, I'm not too concerned since it only appears once (or a few times) on each page. Non-semantic <div>s can often be replaced with HTML5 semantic sectioning blocks, so it's not a major issue.

The bug highlighted in my original response, where the center column would shrink when lacking content, has been resolved.

Summary

This method employs 3 columns: L (left), R (right), and C (center), where L and R have fixed widths while C is fluid.

The key to this approach lies in utilizing positive and negative margins along with the .with-r/.with-l modifier classes.

The .with-l/.with-r modifier classes are added to the .column-container. They introduce positive left and right margins respectively, matching the width of the left and right columns (in this case, both are set at 240px).

Both the left and right columns are given fixed widths of 240px and a corresponding negative margin equal to their width. The left column has the negative margin on the left side, and the right one on the right side.

An excellent feature of this solution is its flexibility. If I wish to switch to a 2-column layout by removing the R column and its associated .with-r modifier, or eliminate the L column, it can be easily accomplished.

JSFiddle

http://jsfiddle.net/5yq7J/ (similar to the example below but with Lorem Ipsum text)

SCSS

/*************************/
/* quick and dirty reset */
/*************************/
* { 
    margin: 0;
    padding: 0;
    outline: 1px dotted #f00; 
}

/*************************/
/* some boilerplate crap */
/*************************/
%block {
    position: relative;
    display: block;
}

%clear {
    &:after {
        @extend %block;
        content: "";
        float: none;
        clear: both;
        width: 100%;
    }
}

%layer {
    @extend %block;
    @extend %clear;
}

/***********************************/
/* all the important stuff follows */
/***********************************/

.container { 
    @extend %layer;
    margin-left: auto;
    margin-right: auto;
    min-width: 960px;
    width: 90%;
}

.column-container {
    @extend %layer;
    &.with-l { margin-left: 240px; }
    &.with-r { margin-right: 240px; }
}

%column { 
    @extend %block;
    float: left; 
}

.column-l {
    @extend %column;
    width: 240px;
    margin-left: -240px;
}

.column-c {
    @extend %column;
    width: 100%;
}

.column-r {
    @extend %column;
    width: 240px;
    margin-right: -240px;
}

.cell { 
    @extend %layer;
    padding: 1em;
}

HTML

<h1>Columns L, C &amp; R</h1>
<div class="container">
    <div class="column-container with-l with-r">
        <div class="column-l">
            <div class="cell">
                <h2>Column L</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
        <div class="column-c">
            <div class="cell">
                <h2>Column C</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
        <div class="column-r">
            <div class="cell">
                <h2>Column R</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
    </div>
</div>

Answer 6

This answer has been improved. Here's the original version.

Presented below is a simple layout pattern that was constructed with the help of chat participants and some experimenting. It fulfills the requirements outlined in my initial query, although it does involve using one non-semantic <div> (which is an improvement from the previous solution). However, I'm not too concerned since it only appears once (or a few times) on each page. Non-semantic <div>s can often be replaced with HTML5 semantic sectioning blocks, so it's not a major issue.

The bug highlighted in my original response, where the center column would shrink when lacking content, has been resolved.

Summary

This method employs 3 columns: L (left), R (right), and C (center), where L and R have fixed widths while C is fluid.

The key to this approach lies in utilizing positive and negative margins along with the .with-r/.with-l modifier classes.

The .with-l/.with-r modifier classes are added to the .column-container. They introduce positive left and right margins respectively, matching the width of the left and right columns (in this case, both are set at 240px).

Both the left and right columns are given fixed widths of 240px and a corresponding negative margin equal to their width. The left column has the negative margin on the left side, and the right one on the right side.

An excellent feature of this solution is its flexibility. If I wish to switch to a 2-column layout by removing the R column and its associated .with-r modifier, or eliminate the L column, it can be easily accomplished.

JSFiddle

http://jsfiddle.net/5yq7J/ (similar to the example below but with Lorem Ipsum text)

SCSS

/*************************/
/* quick and dirty reset */
/*************************/
* { 
    margin: 0;
    padding: 0;
    outline: 1px dotted #f00; 
}

/*************************/
/* some boilerplate crap */
/*************************/
%block {
    position: relative;
    display: block;
}

%clear {
    &:after {
        @extend %block;
        content: "";
        float: none;
        clear: both;
        width: 100%;
    }
}

%layer {
    @extend %block;
    @extend %clear;
}

/***********************************/
/* all the important stuff follows */
/***********************************/

.container { 
    @extend %layer;
    margin-left: auto;
    margin-right: auto;
    min-width: 960px;
    width: 90%;
}

.column-container {
    @extend %layer;
    &.with-l { margin-left: 240px; }
    &.with-r { margin-right: 240px; }
}

%column { 
    @extend %block;
    float: left; 
}

.column-l {
    @extend %column;
    width: 240px;
    margin-left: -240px;
}

.column-c {
    @extend %column;
    width: 100%;
}

.column-r {
    @extend %column;
    width: 240px;
    margin-right: -240px;
}

.cell { 
    @extend %layer;
    padding: 1em;
}

HTML

<h1>Columns L, C &amp; R</h1>
<div class="container">
    <div class="column-container with-l with-r">
        <div class="column-l">
            <div class="cell">
                <h2>Column L</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
        <div class="column-c">
            <div class="cell">
                <h2>Column C</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
        <div class="column-r">
            <div class="cell">
                <h2>Column R</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
    </div>
</div>

Styling the sacred grail layout with organized columns

Answer №1

Answer №2

Answer №3

Summary

JSFiddle

SCSS

HTML

Similar questions

jQuery - Enlarge Tree View to the level of the selected node

Revise the data model by using option IDs instead of option values in the selection dropdown

How to Use Laravel to Create HTML Divs Without Images

Creating two adjacent squares can be achieved by arranging columns and rows in a specific way

CSS hover effect not working while mouse is in motion

the child div within a Bootstrap 3 column is not being properly styled

What is the process for creating a fade out effect with JavaScript?

Troubleshooting Firefox HTML Positioning Problem (Functioning Properly in IE and Chrome)

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Utilize JavaScript and PHP to dynamically modify the contents of an HTML file

When it comes to HTML5 drag and drop functionality, only the dragstart event is triggered

Solving issues with flexboxes in Safari 5.1.7 on Windows

The Safari browser displays the mobile-friendly version of the website

How can I display a pre-existing div with a dropdown button?

Enhance Your Website Design: Implement an expanded input field that overlaps menu items

I desire to incorporate a subtle fading effect into the script

AngularJS $timeout function failing to update variable

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

Adjusting the height of an Ionic list item when the text overflows is not functioning properly

I am having trouble getting my dropdown to line up with the drop button labeled "MORE"