Liquid Layout Example

An example of a "Liquid" Layout for a website.

by Troy Alford

HTML

<div id="Banner">
    <div id="BannerContent">
        <div id="BannerBG" class="rounded"></div>
        <h1 id="LogoText">LiquidLayout&trade;</h1>
    </div>
    <div id="MenuBar">
        <div id="HomeButton" class="MenuButton MenuLeft">Home</div>
        <div id="LogInButton" class="MenuButton MenuRight">Log In</div>
        <div id="MiscButton" class="MenuButton MenuRight">Misc</div>
    </div>
    <div id="ContentWrapper">
        <div id="ContentBG"></div>
        <div id="Content">
            <p>All of my content goes here. Notice that it wraps nicely, filling the space of my layout without doing anything particularly strange. Below, I'm including a bunch of Lorem Ipsum so you can see what long paragraphs do. Also note that this paragraph has a different styling, to make it stand out.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat massa vitae mauris scelerisque luctus ornare elit sagittis. Donec interdum tincidunt interdum. Sed ut mollis erat. Aliquam erat volutpat. Aenean eleifend odio at leo pellentesque pulvinar. Integer nec euismod quam. Suspendisse nibh eros, cursus sit amet viverra a, gravida et ante. Pellentesque id metus purus. Sed nec quam nisi.</p>
            <p>Fusce tempus, arcu quis malesuada posuere, eros purus malesuada erat, id elementum nisi nulla sit amet sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id mi et dui tincidunt pulvinar scelerisque ac nulla. Praesent eu magna rhoncus ipsum luctus imperdiet non et ligula. Phasellus nec vestibulum ligula. Cras posuere hendrerit gravida. Nunc fermentum pellentesque tortor, et fermentum velit interdum id. Maecenas a sapien non urna aliquam iaculis vitae a ante. Phasellus porta iaculis quam, vitae lacinia mi dignissim vitae. Nullam orci velit, malesuada non lacinia posuere, dignissim eget eros. Ut porta commodo nisl vel euismod. Morbi eros nisi, porttitor vitae molestie eget, tristique sed...

SCSS

$bgcolor: #69C;
$headerbg: url(http://www.silverlight.net/content/samples/sl2/silverlightairlines/run/Images/Background.jpg);
$stripebg: url(http://www.stripegenerator.com/generators/generate_stripes.php?fore=cccccc&h=30&w=1&p=4&back1=ffffff);
$width: 1000px;

$rounding: 10px;

html, body {
    background: $stripebg;
    margin: 0; padding: 0;
    min-width: $width; /* This is the minimum-width of your layout */
}

#Banner {
    background: $bgcolor $headerbg center center no-repeat;
    display: block;
    height: 150px; width: 100%;
    position: relative; /* Forces other elements to be shoved down, but allows absolute positioning of them */
}

#BannerContent {
    position: absolute;
    left: 50%; margin-left: -$width / 2 + 25; /* Centers on the page, stopping when the page reaches min-width. */
    top: 25px;
    height: 100px; width: $width - 50;
}

#BannerBG {
    background: #369;
    opacity: .75;
    width: 100%; height: 100%;
    z-index: 1;
}

#LogoText {
    color: #fff;
    font-family: Georgia, serif;
    font-size: 36px;
    font-weight: bold;
    text-shadow: 3px 3px 3px #666; /* Makes the header stand out a bit */
    
    left: 28px; top: 28px;
    position: absolute;
    z-index: 2;
}

#MenuBar {
    background: #eee;
    border-width: 1px 0px;
    border-style: outset;
    height: 20px; width: 100%;
    
    top: 150px;
    position: absolute;
    z-index: 2;
}

.MenuButton {
    border: 1px solid #eee; /* Normal border-color is same as menu BG */
    cursor: pointer;
    display: inline-block;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 14px;
    height: 18px;
    padding: 0 4px;
}
.MenuButton:hover {
    border-color: #ccc; /* Highlights the border without changing the layout */
}

.MenuLeft {
    float: left;
}
.MenuRight {
    float: right; /* Note that this makes the elements appear in the reverse order
                     from how they appear in the HTML */
}

#ContentWrapper {
    text-align: justify;
   ...

JavaScript

$(function() {
    $('.MenuButton').bind('click', function() {
        var $btn = (this instanceof jQuery) ? this : $(this);
        alert("'" + $btn.html() + "' button was clicked!");
    });
});