www.webdeveloper.com
Results 1 to 7 of 7

Thread: Can't get columns to stretch to the footer

  1. #1
    Join Date
    Apr 2014
    Posts
    44

    Can't get columns to stretch to the footer

    Hello everyone,

    So I'm pretty new still with CSS. I'm developing my website for school. I've got it finished up fairly well, but I have one minor problem. I can't seem to figure out how to get my left and right columns to stretch to the footer.

    Can someone take a look at the site? I've uploaded it to my server so you can check out the CSS and XHTML there.

    I'll also post the code below. URL for Site: http://www.tylerrobinson.net/mult128/index2.html

    Thanks for taking the time to look!

    The CSS:
    PHP Code:
    body {
        
    background-color#FFFFFF;
        
    text-aligncenter;
        
    margin20px;
        
    padding0;
        
    fontnormal 0.8em/1.2em verdana,aria,sans-serif;
        
    color#333;
        
    }
        
    @
    font-face {
        
    font-family'dinorma_normal';
        
    srcurl('type/dinorma-webfont.eot');
        
    srcurl('type/dinorma-webfont.eot?#iefix'format('embedded-opentype'),
    url('type/dinorma-webfont.woff'format('woff'),
    url('type/dinorma-webfont.ttf'format('truetype'),
    url('type/dinorma-webfont.svg#dinorma_normal'format('svg');
        
    font-weightnormal;
        
    font-stylenormal;
    }
        
    {
        
    color:#FFF;
        
    text-decoration:none;
        }
        
    a:hover {
        
    color#9ECF38;
        
    }
        
    #wrapper1 {
        
    position:relative;
        
    text-align:left;
        
    width:100%;
        
    background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
        
    }
    #wrapper2 {
        
    position:relative;
        
    text-align:left;
        
    width:100%;
        
    background:url("../images/leftcolor_bg.gif"repeat-y top left;
        }
        
    #header {
        
    background-color#791642;
        
    padding10px;
        
    margin0;
        
    text-alignleft;
        
    color#FFF;
        
    }

    #header img {

    }
        
    #header h1 {
        
    font-size:200%;
        }
        
    #header a:hover {
        
    color:#7A2875;
        
    }


    /*--Menu CSS Start*/

    #navbar {
        
    margin0;
        
    padding0px;
        
    height1em;
        
    positionabsolute;
        
    right150px;
        
    top50px;
        
    z-index100;
        
    font-family'dinorma_normal'cursive;
        
    font-size:1.5em;
    }
        
    #navbar li {
        
    list-stylenone;
        
    floatleft
    }
        
    #navbar li a {
        
    displayblock;
        
    padding10px 8px;
        
    background-color#9ECF38;
        
    color#000;
        
    text-decorationnone;
    }
        
    #navbar li ul {
        
    displaynone;
        
    width10em/* Width to help Opera out */
        
    background-color#D2E9A3;
    }

    #navbar li:hover ul {
        
    displayblock;
        
    positionabsolute;
        
    margin0;
        
    padding0
        
    background-color#D2E9A3;
        
    }

    #navbar li:hover li {
        
    floatnone
        
    background-color#D2E9A3;
        
    }

    #navbar li:hover li a {
        
    background-color#D2E9A3;
        
    border-bottom1px solid #fff;
        
    color:white;
    }

    #navbar li li a:hover {
        
    background-color#D2E9A3;
        
    color:white;
    }

    #navbar li:hover ul, #navbar li.hover ul {
        
    displayblock;
        
    positionabsolute;
        
    margin0;
        
    padding0
        
    background-color#D2E9A3;
        
    color:white;
    }

    #navbar li:hover li, #navbar li.hover li {
        
    floatnone
        
    background-color#D2E9A3;
    }

    #navbar li:hover li a, #navbar li.hover li a {
        
    background-color#9ECF38;
        
    border-bottom1px solid #fff;
        
    color#000;
    }

    /*--Menu CSS End*/

    /*--Quick Nav*/

    #quicknav li li {
        
    margin0 0 0 0;
        list-
    style-type:none;
        
    text-indent:-42px;
        
    text-align:left;
    }

    #maincol {
        
    position:relative;
        
    margin:0;
        
    padding:10px;
        
    background-color:#9ECF38;

        
    }
    #leftcol { 
        
    position:relative;
        
    top:-10px;
        
    left:-10px;
        
    float:left;
        
    width:220px;  /* for IE5/WIN */
        
    voice-family"\"}\"";
        
    voice-family:inherit;
        
    width:200px/* actual value */
        
    margin:0 0 -10px 0;
        
    padding:10px;
        
    background-color:#D12673;
        
    z-index:1;
        }
    #rightcol {
        
    position:relative;
        
    top:-10px;
        
    right:-10px;
        
    float:right;
        
    width:220px;  /* for IE5/WIN */
        
    voice-family"\"}\"";
        
    voice-family:inherit;
        
    width:200px/* actual value */
        
    margin:0 0 -10px 0;
        
    padding:10px;
        
    background-color:#D12673;
        
    z-index:1;
        }
    #centercol {
        
    position:relative;
        
    padding:0 240px;
        }
    #centercol a {
        
    color:#666;
        
    }
    #centercol a:hover {
        
    border-bottom:1px solid;
        
    color:#9343B9;
        
    }
    #footer {
        
    position:relative;
        
    top:1px;
        
    background-color#791642;
        
    width:100%;
        
    clear:both;
        
    margin:0;
        
    padding:10;
        
    text-align:center;
        
    color:#CCC;
        

    The XHTML:
    PHP Code:
    <!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-GB">
    <
    head>
    <
    title>Mult128 Tyler Robinson</title>
    <
    link href="css/index_style_1.css" rel="stylesheet" type="text/css" />
    </
    head>
    <
    body>

    <
    div id="header">
      <
    div id="logo"><img src="assets/trnet_logo.png" width="141" height="66" alt="Tyler Robinson Logo" />
    </
    div>

    <
    ul id="navbar">
        <
    li><a href="#">LO 3</a><ul>
            <
    li><a href="lo3/assign3_1_1.html">Assign 3.1 EX 1</a></li>
            <
    li><a href="#">Assign 3.1 EX 2</a></li>
            <
    li><a href="#">Assign 3.1 EX 3</a></li>
            <
    li><a href="#">Assign 3.2 2 Column Fixed</a></li>
            <
    li><a href="#">Assign 3.2 3 Column Fixed</a></li>
            <
    li><a href="#">Assign 3.2 2 Column Liquid</a></li>
            <
    li><a href="#">Assign 3.2 3 Column Liquid</a></li>
            <
    li><a href="#">Assign 3.2 2 Column Shared</a></li>
            <
    li><a href="#">Assign 3.3 Design Review</a></li></ul>
        </
    li>
        <
    li><a href="#">LO 4</a><ul>
            <
    li><a href="#">Assign 4.1</a></li>
            <
    li><a href="#">Assign 4.2</a></li></ul>
        </
    li>
        <
    li><a href="#">LO 5</a><ul>
            <
    li><a href="#">Assign 5.1</a></li></ul>
        </
    li>
        <
    li><a href="#">LO 6</a><ul>
            <
    li><a href="#">Assign 6.1</a></li></ul>
        </
    li>
        </
    ul>  
          
        <!-- 
    Menu End --> 
        
      </
    div> <!--Menu div End -->
    </
    div> <!-- Header tag end -->



    <
    div id="wrapper1"><!-- sets background to white and creates full length leftcol-->
        
        <
    div id="wrapper2"><!-- sets background to white and creates full length rightcol-->
        
            <
    div id="maincol"><!-- begin main content area -->
                    
    <
    div id="leftcol"><!-- begin leftcol -->
        <
    ul id="quicknav">
        <
    li>LO 3<ul>
            <
    li><a href="lo3/assign3_1_1.html">Assign 3.1 EX 1</a></li>
            <
    li><a href="#">Assign 3.1 EX 2</a></li>
            <
    li><a href="#">Assign 3.1 EX 3</a></li>
            <
    li><a href="#">Assign 3.2 2 Column Fixed</a></li>
            <
    li><a href="#">Assign 3.2 3 Column Fixed</a></li>
            <
    li><a href="#">Assign 3.2 2 Column Liquid</a></li>
            <
    li><a href="#">Assign 3.2 3 Column Liquid</a></li>
            <
    li><a href="#">Assign 3.2 2 Column Shared</a></li>
            <
    li><a href="#">Assign 3.3 Design Review</a></li></ul>
        </
    li>
        <
    li>LO 4<ul>
            <
    li><a href="#">Assign 4.1</a></li>
            <
    li><a href="#">Assign 4.2</a></li></ul>
        </
    li>
        <
    li>LO 5<ul>
            <
    li><a href="#">Assign 5.1</a></li></ul>
        </
    li>
        <
    li>LO 6<ul>
            <
    li><a href="#">Assign 6.1</a></li></ul>
        </
    li>
        </
    ul>  
    </
    div><!-- end leftcol -->
                    
                <
    div id="rightcol"><!-- begin rightcol -->
                    <
    p><strong>Some of My Work</strong></p>
        <
    p><img src="assets/bc.gif" width="197" height="178" alt="My Business Card" /><img src="assets/small_layla.png" width="149" height="265" alt="Layla My Daughter" /></p>
        
        <
    p>
            <
    a href="http://validator.w3.org/check?uri=referer"><img
            src
    ="http://www.w3.org/Icons/valid-xhtml10"
            
    alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
        </
    p>
                </
    div><!-- end righttcol -->
                
                <
    div id="centercol"><!-- begin centercol -->
                    <
    p><strong><abbr title="Advanced HTML">MULT128</abbr></strongis a course about standards based <abbr title="Extensible HyperText Markup Language">XHTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr>, and <abbr title="Dynamic HTML">DHTML</abbr>. In this course we will be building <dfn title="Built according to W3C standards">standards-based</dfnweb sites.</p>
    <
    p>This unstyled web page is my barebones start to this courseIt will be updated and changed by meTyler Robinsona student of <abbr title="Saskatchewan Institute of Applied Science and Technology">SIAST</abbr>, while staying in accordance with the principles laid out for XHTML development by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>


                </
    div><!-- end centercol -->
                    
            </
    div><!-- end main content area -->
                    
            <
    div id="footer"><!-- begin footer -->
                <
    p>This is the footer</p>
            </
    div><!-- end footer -->
        
        </
    div><!-- end wrapper1 -->

    </
    div><!-- end wrapper2 -->
    </
    body>
    </
    html

  2. #2
    Join Date
    Apr 2014
    Posts
    44
    No one has an answer for this? I've played around with it some more but I haven't been able to make any progress. Some help would be REALLY nice!

  3. #3
    Join Date
    Mar 2011
    Posts
    1,139
    Designers have been fighting this battle for over a decade. Several solutions have evolved. If you search on "css columns equal height" you'll find something that will probably work for you.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    May 2014
    Posts
    915
    Generally speaking you are asking for something that CSS layouts were never really originally intended to do. Until very recently making columns and having them all reach an equal height was impossible without certain... tricks. There are five main ways of doing it.

    The first trick is called "faux columns" -- you fake the appearance by using either a wrapping element with a background-image on it (only useful for fixed width layouts), or by absolute positioning dummy DIV (or generated content if you don't care about IE7/earlier) "bottom" with a massive height (like 999em) underneath the columns; this fakes the APPEARANCE of those columns stretching even though they really don't. This is the technique I'd probably advocate just because it can be made compatible all the way back to IE 5.x if need be, without resorting to non-semantic markup.

    The second trick is "tables for layout" -- tables can do that. Problem is that's non-semantic markup and abuse of the table tag for something it was never meant for, and tables can introduce their own issues across different browsers.

    The third method is "display:table" and "display:table-cell" -- since table-cells do this you can use that display state to pull it off; unfortunately both are relatively recent concepts and browser support is iffy/nonexistent if you care about legacy IE. (pretty much 7 and earlier)

    The final major technique for doing this is the new kid, "display:flex" -- the flex-box model is completely capable of what you ask, but has it's own set of ... issues, not the least of which being that it only works in bleeding edge browsers and IE 10+. Even IE9 can't do this one as it's just too new, and it can also be hard to manage/control and is still kind-of inconsistent across browsers. Still, I suggest learning this one now even if you're not going to use it yet, because it is VERY powerful and is the future of CSS layouts.

    Some other observations about your code:

    There is no reason to put a TITLE on a stylesheet LINK... and where are your MEDIA attributes?

    Your logo probably doesn't belong in the markup as a IMG tag. You've got a perfectly good structural H1, but it doesn't gracefully degrade images off defeating the entire reason to have it there. You may want to look into "gilder-levin image replacement" as that's what should probably be done there.

    Not every element needs a DIV around it. If you already have a DIV parent for example, there is NO reason to wrap that extra DIV around the IMG, or the H1. You aren't doing ANYTHING there that couldn't have been applied to those tags directly.

    Be careful on comment placements -- comments (yes, I said comments) between sibling level elements can trip two giant rendering bugs in certain versions of IE and FF -- the so called "double render" and "dissapearing content" bugs. This can be avoided two ways:

    1) by not wasting time on pointlessly obvious opening comments:
    <div id="footer"><!-- begin footer -->

    No, really, a DIV with the ID of 'footer' is the beginning of the footer? Whoddathunkit?!?

    2) placing closing comments inside the close instead of after, so instead of:
    </div><!-- end footer -->

    use:
    <!-- #footer --></div>

    Note, you don't need to say "end" either, </div> says "end".

    Moving the closing comment and not wasting time on pointless openings makes it impossible for the comment to end up between sibling-level elements, making any positioning bugs induced by comments impossible.

    I'm gonna do you a bit of a favor, and do a rewrite of your page how I'd go about it -- then document it so you can learn from it -- including implementing that faux-column technique I mentioned.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Mar 2012
    Posts
    1,520
    Further to DS's comments, the simplest way of achieving the effect in your case is to fake it, I.e. Make the background color of the left and right columns match the underlying body. That way there is no color change to show! This relies on the middle column always being the tallest, otherwise that will show short. I'm roughly knocking up a demo of what I mean. It isn't ready yet, but I'll post it as soon as...

  6. #6
    Join Date
    May 2014
    Posts
    915
    Quote Originally Posted by jedaisoul View Post
    This relies on the middle column always being the tallest, otherwise that will show short.
    Which is why you don't do it that way -- again, apo bottom 999em underneath.

    Czech this out:
    http://www.cutcodedown.com/for_other.../template.html

    Apo those two extra div underneath aligned bottom, and you don't have the worries of what column is tallest; well, unless your page content is more than 999em tall, in which case to be frank, you have bigger problems

    I cleaned up a few other things, but as with all my examples the directory:
    http://www.cutcodedown.com/for_others/mrJane

    Is unlocked for easy access to the bits and pieces.

    I added some responsive code, but could still use a wee bit of tweaking...

    Busy Saturday, but I'll try to do a section by section explanation of the how/what/why/where of the design choices I made... and some changes I'd still make like restricting the maximum width.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Mar 2012
    Posts
    1,520
    I do not doubt that DS's solution is superior, indeed I would not code it this way, but it is a simple way to achieve the effect. I'll let you choose. But first, I've dumped a lot of your code that simply was confusing the issue. So you can't simply plug it in to your existing web page. Sorry, but it way too complex trying to amend your code...

    Code:
    <!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-GB">
    <head>
    <title>Mult128 - Tyler Robinson</title>
    <style>
    * {
        padding: 0;
        margin: 0;
        border:0;
    }
    html {
        background-color:#DDD;
    }
    body {
        background-color:#D12673;
        max-width:960px;
        margin: 0 auto;
        font: normal 100%/120% verdana,arial,sans-serif;
        color: #333;
    }
    p {
        padding: 8px; 
    }
    ul,ol {
        padding: 12px 0 0 8px; 
        list-style:none;        
    }
    li li {
        font-size:14px;
    }
    #header {
        background-color: #791642;
        height: 66px;
        overflow:hidden;
    }
    
    /*--Menu CSS Start*/
    
    #logo {
        float: left;
    }
    #navbar {
        float: right;
        font-family: 'dinorma_normal', cursive;
        height: 90px;
        overflow:hidden;
    }
    
    /*--Menu CSS End*/
    
    #leftcol { 
        width:240px; /* actual value */
        float:left;
        background-color:#D12673;
        z-index:1;
        }
    
    #centercol {
        width:50%; 
        float:left;
        background-color:#9ECF38;
    }
    
    #rightcol {
        width:240px;
        float:left;
    }
    
    /*-- stepped width adjustment */
    
    @media (max-width:959px) {
        #rightcol {
            display:none;
        }
        #centercol {
            width:570px; /* or 70% */
        }
    }
    
    @media (max-width:839px) {
        #centercol {
            width:450px; /* or 64% */
        }
    }
    
    @media (max-width:719px) {
        #centercol {
            width:330px; /* or 56% */
        }
    }
    @media (max-width:599px) {
        #centercol {
            width:210px; /* or 48% */
        }
    }
    
    @media (max-width:479px) {
        #leftcol {
            display:none;
        }
        #centercol {
            width:100%;
        }
    }
    
    #footer {
        background-color: #791642;
        width:100%;
        clear:both;
        text-align:center;
        color:#CCC;
    }
    </style>
    </head>
    <body>
    
    <div id="header">
        <div id="logo">
            <img src="assets/trnet_logo.png" width="141" height="66" alt="Tyler Robinson Logo" />
        </div>
    <ul id="navbar">
        <li><a href="#">LO 3</a><ul>
            <li><a href="lo3/assign3_1_1.html">Assign 3.1 - EX 1</a></li>
            <li><a href="#">Assign 3.1 - EX 2</a></li>
            <li><a href="#">Assign 3.1 - EX 3</a></li>
            <li><a href="#">Assign 3.2 - 2 Column Fixed</a></li>
            <li><a href="#">Assign 3.2 - 3 Column Fixed</a></li>
            <li><a href="#">Assign 3.2 - 2 Column Liquid</a></li>
            <li><a href="#">Assign 3.2 - 3 Column Liquid</a></li>
            <li><a href="#">Assign 3.2 - 2 Column Shared</a></li>
            <li><a href="#">Assign 3.3 - Design Review</a></li></ul>
        </li>
        <li><a href="#">LO 4</a><ul>
            <li><a href="#">Assign 4.1</a></li>
            <li><a href="#">Assign 4.2</a></li></ul>
        </li>
        <li><a href="#">LO 5</a><ul>
            <li><a href="#">Assign 5.1</a></li></ul>
        </li>
        <li><a href="#">LO 6</a><ul>
            <li><a href="#">Assign 6.1</a></li></ul>
        </li>
        </ul>  
          
        <!-- Menu End --> 
        
      </div> <!--Menu div End -->
    </div> <!-- Header tag end -->
    
    <div id="leftcol"><!-- begin leftcol -->
        <ul id="quicknav">
        <li>LO 3<ul>
            <li><a href="lo3/assign3_1_1.html">Assign 3.1 - EX 1</a></li>
            <li><a href="#">Assign 3.1 - EX 2</a></li>
            <li><a href="#">Assign 3.1 - EX 3</a></li>
            <li><a href="#">Assign 3.2 - 2 Column Fixed</a></li>
            <li><a href="#">Assign 3.2 - 3 Column Fixed</a></li>
            <li><a href="#">Assign 3.2 - 2 Column Liquid</a></li>
            <li><a href="#">Assign 3.2 - 3 Column Liquid</a></li>
            <li><a href="#">Assign 3.2 - 2 Column Shared</a></li>
            <li><a href="#">Assign 3.3 - Design Review</a></li></ul>
        </li>
        <li>LO 4<ul>
            <li><a href="#">Assign 4.1</a></li>
            <li><a href="#">Assign 4.2</a></li></ul>
        </li>
        <li>LO 5<ul>
            <li><a href="#">Assign 5.1</a></li></ul>
        </li>
        <li>LO 6<ul>
            <li><a href="#">Assign 6.1</a></li></ul>
        </li>
        </ul>  
    </div><!-- end leftcol -->
                
    <div id="centercol"><!-- begin centercol -->
    <p><strong><abbr title="Advanced HTML">MULT128</abbr></strong> is a course about standards based <abbr title="Extensible HyperText Markup Language">XHTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr>, and <abbr title="Dynamic HTML">DHTML</abbr>. In this course we will be building <dfn title="Built according to W3C standards">standards-based</dfn> web sites.</p>
    <p>This unstyled web page is my barebones start to this course. It will be updated and changed by me, Tyler Robinson, a student of <abbr title="Saskatchewan Institute of Applied Science and Technology">SIAST</abbr>, while staying in accordance with the principles laid out for XHTML development by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor, mi nec bibendum porttitor, massa elit consequat diam, eget eleifend nibh ligula ut massa. Pellentesque nec sodales nunc, nec ornare est. Quisque adipiscing rutrum lorem, id lobortis felis rhoncus et. Sed posuere eleifend ultrices. Curabitur semper ultrices enim, quis molestie nunc egestas nec. Curabitur sollicitudin turpis eu libero tincidunt imperdiet. Vivamus hendrerit pulvinar nulla, vel ornare dui interdum quis. Donec condimentum turpis et leo luctus aliquet. Aliquam pulvinar egestas purus, vitae bibendum nibh euismod in. Donec accumsan enim ipsum, eget cursus augue pretium quis. Quisque viverra sapien vel quam commodo egestas. Nullam consequat consectetur mi non interdum. Proin mattis a mi sed suscipit. Integer dignissim commodo urna, nec interdum arcu eleifend sit amet. Donec adipiscing fermentum neque nec posuere. Etiam vel dui mi.</p>
    <p>
    Donec eleifend sapien eu sollicitudin accumsan. Aenean quis rhoncus arcu. Nullam convallis, dolor id ullamcorper fermentum, ligula quam adipiscing sapien, et fermentum nunc ante sed sem. Proin fermentum auctor elementum. Maecenas risus mi, fermentum sed pellentesque non, hendrerit et ipsum. Nam imperdiet porta molestie. Donec tellus neque, rutrum ut massa vitae, porta ultrices ipsum. Sed suscipit elementum est, vitae cursus nibh porttitor sit amet. Phasellus vestibulum ipsum ac nibh vestibulum tincidunt. Aliquam sodales lacus diam, quis tincidunt nisl consectetur nec.</p>
    <p>
    Phasellus lectus ante, viverra sed orci ac, semper aliquam orci. Nulla facilisi. Pellentesque ullamcorper enim vel tellus tincidunt posuere. Etiam sit amet laoreet neque, vitae rhoncus nunc. Praesent tempor condimentum justo convallis consequat. Duis auctor adipiscing turpis non malesuada. Duis malesuada sagittis orci, nec adipiscing urna malesuada nec. Nunc vehicula vehicula feugiat. Vestibulum fringilla eros id elit bibendum, sit amet pellentesque dui placerat.</p>
    <p>
    Donec eleifend sapien eu sollicitudin accumsan. Aenean quis rhoncus arcu. Nullam convallis, dolor id ullamcorper fermentum, ligula quam adipiscing sapien, et fermentum nunc ante sed sem. Proin fermentum auctor elementum. Maecenas risus mi, fermentum sed pellentesque non, hendrerit et ipsum. Nam imperdiet porta molestie. Donec tellus neque, rutrum ut massa vitae, porta ultrices ipsum. Sed suscipit elementum est, vitae cursus nibh porttitor sit amet. Phasellus vestibulum ipsum ac nibh vestibulum tincidunt. Aliquam sodales lacus diam, quis tincidunt nisl consectetur nec.</p>
    <p>
    Phasellus lectus ante, viverra sed orci ac, semper aliquam orci. Nulla facilisi. Pellentesque ullamcorper enim vel tellus tincidunt posuere. Etiam sit amet laoreet neque, vitae rhoncus nunc. Praesent tempor condimentum justo convallis consequat. Duis auctor adipiscing turpis non malesuada. Duis malesuada sagittis orci, nec adipiscing urna malesuada nec. Nunc vehicula vehicula feugiat. Vestibulum fringilla eros id elit bibendum, sit amet pellentesque dui placerat.
    </p>
    
                </div><!-- end centercol -->
                    
    <div id="rightcol"><!-- begin rightcol -->
        <p><strong>Some of My Work</strong></p>
        <p><img src="assets/bc.gif" width="197" height="178" alt="My Business Card" /><img src="assets/small_layla.png" width="149" height="265" alt="Layla My Daughter" /></p>
        
        <p>
            <a href="http://validator.w3.org/check?uri=referer"><img
            src="http://www.w3.org/Icons/valid-xhtml10"
            alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
        </p>
    </div><!-- end righttcol -->
                    
            <div id="footer"><!-- begin footer -->
                <p>This is the footer</p>
            </div><!-- end footer -->
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles