Tag Archives: fluid

Creating Fluid Fullscreen XHTML CSS Layouts

Making the transition from old school html to new school xhtml can be quite painful, especially if you’re not familiar with how to do this without the use of tables. In this article, I will discuss the techniques and ideas necessary to create fluid xhtml/css layouts. Let’s examine the following XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/xhtml;charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
    </head> 
 
    <body> 
 
    <div class="container">
        <div class="header">
            <div class="header-content">Header</div>
        </div> 
 
        <div class="body">
            <div class="left-sidebar">
                <div class="left-content">left</div>
            </div>
            <div class="right-sidebar">
                <div class="right-content">right</div>
            </div>
            <div class="content">Content</div>
        </div> 
 
        <div class="footer">
            <div class="footer-content">Footer</div>
        </div>
    </div> 
 
    </body> 
 
    </html>

Now let’s begin dissecting it. The first line of the XHTML document is the doctype (document type) specifier. This tells the browser that the following markup is to adhere to the standards of XHTML strict, as defined by the W3C (World Wide Web Consortium www.w3.org). The xhtml strict doctype basically states that the document must be XML compliant and follow the rules of the doctype, the root element in the document must be “html” and the root element must contain an xml namespace (xmlns) attribute.

Now as you see, the document does in fact meet those rules. The first node in the document is “html” and it does have the xmlns attribute…BUT WHAT DOES IT ALL MEAN? Don’t worry, we’ll go line by line and break it down.

The first line in the document is the doctype, which we’ve all ready talked about, the second line is the “html” node. This has an XML namespace attribute on it that basically states that all the nodes defined in this document, are by default, XHTML. The xml:lang=”en” attribute specifies that the xml in the document is English in language as does the lang=”en” which specifies the language content of the document is also in English.

The next node is the “head” node, which is basically the same as in old school HTML. It contains a “title” node (document title), a “meta” node and a “style” node.

The “meta” node in this case is specifying the content type of the document as well as the encoding/charset type. The content type is pretty self expanitory, it’s xhtml/text, the encoding/charset for the document is Unicode (aka ISO 10646, for more information check out http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0040).

The “style” node is specifying where we are going to get the style or CSS from? In this case it’s a document called “style.css”. So what have it included in this way? The answer is, to ensure that the browser type reading this document is CSS1 compliant or better. We’ll check out the details of the CSS later, right now let’s just check out the XHTML.

Next we get to the guts of the operation, the “body” tag. Within the body is the basic layout of the page. Now, the idea behind this layout is to achieve a fluid layout that will take up the entire height of the page, without adding scrollbars and without the need for any “fixing” javascript to adjust the sizing for us. In short, we are defining the basic structure for a tableless layout that will give us a header, footer, left pane, content area and a right pane. This may be a little more that you’re looking for, but I figured this would be the best way to demonstrate this fluid layout technique.

This is basically what we want for this example:

XHTML Layout

XHTML Layout

So now the important part, if you haven’t already, you might want to take a moment and create an index.html page and copy the example XHTML document into it, then create a style.css page at the same level. It’s important to understand what’s going on as we make changes to the CSS and it’s a lot easier to understand if you can see the changes as they happen.

Now, let’s create the CSS to layout our XHTML document in the manner we want. First thing we need to do which may seem a bit odd if you’re first making the transition from HTML to XHTML is set the height of the “html” and “body” nodes. In HTML, these are already set to 100% height of the current window, however in XHTML they are not. So let’s add the following to our CSS:

html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}

So now, we’ve set the “body” and “html” up to take up the entire screen and not pad or margin the edges. Ok, well that’s a good start, next let’s add a little background color and sizing to various parts of the document so we can see what’s where.

.header, .footer{
height: 80px;
background-color: #EFEFEF;
} 
 
.body{
background-color: #C7DFFA;
} 
 
.left-sidebar{
background-color: gray;
} 
 
.right-sidebar{
background-color: gray;
}

Ok, so now let’s look at what we have. YIKES!

XHTML Example

XHTML Example

At this point you should have something similar to the above example. We can see the individual divs, but we’ve got some work to do to get them layed out like we want.

The first thing we’re going to want to do is set the container to be 100% in height, that way we can have the full height of the window to layout our divs.

.container{
height: 100%;
}

Next, let’s set the height of our body class “.body” (not the “body” tag) to 100%. We want this area to expand and contract with the window and still take up the entire height of the screen. Let’s also just for clarity, hide the left and right sidebars (we’ll show them again later)

.body{
height: 100%;
background-color: #C7DFFA;
} 
 
.left-sidebar{
display: none;
} 
 
.right-sidebar{
display: none;
}

XHTML Example

XHTML Example

Well, that’s a little better, but there are scrollbars on the window now. We wanted 100% of the available screen height but instead of we got 100% of the window height, what’s going on? This is exactly what’s supposed to happen in XHTML the height is based up the actual window height, not the available height. So to fix this we need to do a little finessing. He’re what we need to do. We need to set the top and bottom margins of the “body” class (not the “body” tag) to be negative the height of the header and footer respectively. Being that our header and footer are the same height (80px) we need to subtract that area from the “body” class (not the “body” tag). Like so:

.body{
height: 100%;
margin-top: -80px;
margin-bottom: -80px;
background-color: #C7DFFA;
}

XHTML Example

XHTML Example

Well, that took care of the height problem, but wait…what happened to the header, it’s gone. Actually, it’s behind the “body” class (not the “body” tag), we need to bring it forward. To do that we set the position to relative. This allows us the position the tag using coordinates if we want and forces the browser to paint these above other non-relative/absolute layers.

.header, .footer{
height: 80px;
background-color: #EFEFEF;
position: relative;
}

Ahhhh, that’s better. The “header” and “footer” are visible, the “body” class (not “body” tag) are acting correctly. You may have also noticed at this point that the “content” is not longer visible within the “body” class (not the “body” tag). Don’t worry about that, we’ll address that later. So now, we can resize the window all we want and the height is correct, no scrollbars, life is peachy. Now let’s tackle those sidebars. Let’s start by making them visible again.

.left-sidebar{
background-color: gray;
} 
 
.right-sidebar{
background-color: gray;
}

XHTML Example

XHTML Example

Wait, where are they? They’re still not visible, let’s make them visible and put them in the right spot. First let’s set the height to 100%, next let’s give it a width of 100px, then let’s set to the left by using float left.

.left-sidebar{
height: 100%;
background-color: gray;
width: 100px;
float: left;
}

XHTML Example

XHTML Example

GEORGEOUS! That’s what we want, now let’s do the same to the other side but float it right.

XHTML Example

XHTML Example

PERFECTION! Now all we have left to do is situate our content layers properly and we’re done. So let’s start with the “left-content”. To make the content of this layer visible we need to pad enough to account for the header and the footer. Remember, we set the height of this div to 100%, so the top and the bottom are hidden behind the “header” and “footer”. So let’s pad the top by 100px, bottom by 100px, left by 10px and right by 10px, that should look nice. Also, let’s apply this to both the left and right content areas. I’m going to also set the “right-content” to text align right, just for looks.

.left-content{
padding: 100px 10px 100px 10px;
} 
 
.right-content{
padding: 100px 10px 100px 10px;
text-align: right;
}

XHTML Example

XHTML Example

Looking good, now let’s finish up by getting the “content” visible and formatted. So let’s do basically the same thing and pad the “content” div, let’s set the top padding to 100px, left to 120px (100px plus 20px for looks), bottom to 100px and right to 120px.

.content{
padding: 100px 120px 100px 120px;
}

And while we’re at it, why not format the header and footer content nicely too.

.header-content{
padding: 20px;
text-align: center;
} 
 
.footer-content{
padding: 20px;
text-align: center;
}

XHTML Example

XHTML Example

Now we’re done, we have a fully fluid layout that takes up 100% of the height and width. The content and sides resize correct. We only get scrollbars when the content is crushed, SUCCESS! Hopefully this helps some of you out there, belows is the complete CSS just in case you need it or the examples didn’t work out for you.

html, body {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    } 
 
    .header, .footer{
    height: 80px;
    background-color: #EFEFEF;
    position: relative;
    } 
 
    .header-content{
    padding: 20px;
    text-align: center;
    } 
 
    .footer-content{
    padding: 20px;
    text-align: center;
    } 
 
    .container{
    height: 100%;
    } 
 
    .body{
    height: 100%;
    margin-top: -80px;
    margin-bottom: -80px;
    background-color: #C7DFFA;
    } 
 
    .content{
    padding: 100px 120px 100px 120px;
    } 
 
    .left-sidebar{
    height: 100%;
    background-color: gray;
    width: 100px;
    float: left;
    } 
 
    .right-sidebar{
    height: 100%;
    background-color: gray;
    width: 100px;
    float: right;
    } 
 
    .left-content{
    padding: 100px 10px 100px 10px;
    } 
 
    .right-content{
    padding: 100px 10px 100px 10px;
    text-align: right;
    }