Testing CSS Layouts for 2 Columns

0

Today I ran into problems coding pages where one had a taller #content and the other a taller #vmenu, and not even JS/jQuery scripts helped, so I went looking for another JS solution.

Until now I thought (and honestly I was surprised it could be so) that this could not be solved with pure CSS, but I was wrong. With CSS it can be solved beautifully, simply and with minimal code.

My inspiration was the page http://css-tricks.com/fluid-width-equal-height-columns/ .

I did not try one of the solutions from there, the one based on tables; 2 of the solutions eventually turned out to be identical and were merged into one, and I put the remaining 4 solutions, together with the merged one, into a web project and tested them on code I had already written.

First of all, here is the shared code. Everything was tested on ASP.NET, with a *.Master file in the root of the web application and the files BasesEarth.aspx and Bases.aspx in a subfolder.

I will not include the C# of these files, because it is empty anyway. So BasesEarth.aspx looked something like this:

XML
<%@ Page Title="" Language="C#"

MasterPageFile="~/TBDougNeinerThree.Master" AutoEventWireup="true"

CodeBehind="BasesEarth.aspx.cs" Inherits="sunamo.cz.ThunderBrigade.BasesEarth"

%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Bases Earth</h1>
    <h2>1. Earth Sensor Tower</h2>
    <img alt="Earth Sensor Tower" src="http://blog.sunamo.cz/../i/ThunderBrigade/Earth Sensor Tower.png">
    <h2>2. Earth Weapon Bunker</h2>
    <h2>3. Earth Command Center</h2>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="toolbar" runat="server"></asp:Content>

And Bases.aspx like this:

XML
<%@ Page Title="" Language="C#" MasterPageFile="~/TBDougNeinerThree.Master"

AutoEventWireup="true" CodeBehind="Bases.aspx.cs"

Inherits="sunamo.cz.ThunderBrigade.Bases" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div>
        For each division (Halon, United, Earth) you can fight with up to 6 types of bases, which have the same names in every division but mostly look completely different.
        <i>Please choose from the menu on the left.</i>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="toolbar" runat="server">
    <h3>Bases:</h3>
    <ul style="list-style-type: none">
        <li class="vmenu_anchor">
            <a href="BasesHalon.aspx">Halon</a>
        </li>
        <li class="vmenu_anchor">
            <a href="BasesUnited.aspx">United</a>
        </li>
        <li class="vmenu_anchor">
            <a href="BasesEarth.aspx">Earth</a>
        </li>
    </ul>
</asp:Content>

Then I also had a Shared.css file with these declarations, which I referenced in every *.Master file:

CSS
.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.w800 {
    background-color: yellow;
    width: 800px;
    max-width: 800px;
    min-width: 800px;
}

#vmenu {
    background-color: #8E7765;
    width: 200px;
    border-right: 5px solid black;
}

.vmenu_anchor {
    margin-left: auto;
    margin-right: auto;
    left: -20px;
    position: relative;
}

#content {
    width: 530px;
    background-color: aqua;
}

And now to the layouts themselves:

CSS Table

The simplest approach, simulating HTML tables.

CSS code:

CSS
#css-table {
    display: table;
}

#css-table .col {
    display: table-cell;
    /*It is here only so that extra padding

    does not cause the element not to fit into its container*/
    padding: 0;
}

HTML code of the .Master:

XML
<div>
    <div>
        <div>
            <asp:ContentPlaceHolder ID="toolbar" runat="server"></asp:ContentPlaceHolder>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>
</div>

The result is OK. The yellow area is empty space that will appear in all the images, because the wrapping div was 800px wide, so I should have set #content to 600px instead of 530px.


CSSTable Bases


CSSTable BasesEarth

One True Layout

The second and last one that turned out just as well as CSS Table.

CSS code:

CSS
#one-true
{
    overflow: hidden;
}

#one-true .col {
    /*width: 27%;*/
    padding: 30px 0 0 0;
    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

HTML code:

XML
<div>
    <div>
        <div>
            <asp:ContentPlaceHolder ID="toolbar" runat="server"></asp:ContentPlaceHolder>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>
</div>

Images:


OneTrueLayout Bases


OneTrueLayout BasesEarth

Doug Neiner

CSS code:

CSS
#doug-neiner-three {
    overflow: hidden;
}

#doug-neiner-three .col {
    /*width: 21%; */
    float: left;
    padding: 0;
}

HTML code:

XML
<div>
    <div>
        <div>
            <asp:ContentPlaceHolder ID="toolbar" runat="server"></asp:ContentPlaceHolder>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>
</div>

Images:


DougNeinerThree Bases


DougNeinerThree BasesEarth

Nicolas Gallagher Method

CSS code:

CSS
#nicolas-gallagher {
    position: relative;
    z-index: 1;
    width: 100%;
}

#nicolas-gallagher .col {
    position: relative;
    /*width: 27%;*/
    padding: 0;
    float: left;
}

.group {
    display: inline-block;
}

HTML code:

XML
<div>
    <div>
        <div>
            <asp:ContentPlaceHolder ID="toolbar" runat="server"></asp:ContentPlaceHolder>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>
</div>

Images:


NicolasGallagher Bases


NicolasGallagher BasesEarth

Flexbox

Setting the order of elements with CSS.

CSS code:

CSS
#flexbox {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: start;
    -webkit-box-align: start;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: start;
    -moz-box-align: start;
    display: box;
    box-orient: horizontal;
    box-pack: start;
    box-align: start;
    overflow: hidden;
}

#flexbox .col {
    /*width: 27.333%;*/
    padding: 30px 0 0 0;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#flexbox .col:nth-child(1) {
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    box-ordinal-group: 2;
}

#flexbox .col:nth-child(2) {
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

HTML code:

XML
<div>
    <div>
        <div>
            <asp:ContentPlaceHolder ID="toolbar" runat="server"></asp:ContentPlaceHolder>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>
</div>

Images:


Flexbox Bases


Flexbox BasesEarth

Categories

Leave a Reply