Basic webpage layout problem

Mailman86

Mailman86

Mailman86

Associate
Joined
21 Jul 2004
Posts
1,258
I need to sharpen my html/css skills as they're not that great at the moment so I've come up with a website I want to make and I just started with the layout today. For the life of me though I can't get everything positioned where I want it though. It doesn't work in either the latest Chrome, Firefox 12 or IE9. Layout is ok in IE7 mode in IE9 though. Something to do with the wrong use of absolute and relative positioning is my guess.

The header should always be at the top and the footer at the bottom. The middle section should adjust in height according to the size of the biggest column inside it (currently one column with a nav in it and then another with the main content of the page). The min-height of the middle area is intentional so the side nav isn't cut off ever. The footer should lie underneath the middle area always.

It's just something I've been experimenting with today so the naming isn't the best and there might be some superfluous css in there, but hopefully the answer to my problem is pretty straight forward. Been a bit trial and error so far with no success. Here's the code:


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <div id="container-outer">
            <div id="container-inner">
                <div id="header">
                    <div id="masthead">
                    </div>
                    <div id="top-nav">
                    </div>
                </div>
                <div id="middle">
                    <div id="left-column">
                        <div id="left-nav">
                            <p>Navigation</p>
                            <p>Navigation</p>
                            <p>Navigation</p>
                            <p>Navigation</p>
                            <p>Navigation</p>
                        </div>
                    </div>
                    <div id="content">
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                        <p>Content</p>
                    </div>
                </div>
                <div id="footer">
                    <p>Footer</p>
                </div>
            </div>
        </div>
    </body>
</html>

Code: 
#container-outer
{
    background-color:#ffffff;
}
#container-inner
{
    background-color:#c0c0c0;
    width: 976px;
    position: relative;
    margin: auto;
}
#header
{
    position: relative;
    width: 100%;
    height: 50px;
}

#masthead
{
    position: relative;
    height: 30px;
    top: 0;
    background-color: #800000
}

#top-nav
{
    position: relative;
    height: 20px;
    bottom: 0;
    background-color: #ffe4c4
}

#middle
{
    position: relative;
    background-color: #ffffff;
    min-height: 320px;
    width: 976px;
}
#left-column
{
    background-color:#ff0000; 
    width: 100px;
    height: 300px;
    position: relative;
    float: left;
}

#content 
{
    background-color: #00ff00;
    width: 800px;
    position: relative;
    right: 0px;
    float: right;
}

#footer
{
    background-color: #ffff00;
    width: 100%;
    height: 100px;
    position: relative;
    bottom: 0px;
}

body, p
{
    margin: 0;
    padding: 0;
}

Firebug tells me that the "content" div is spilling outside of the "middle" div which is not what I want. Any ideas?
 
Might also be worth checking out some of the grid layout frameworks, especially if ou're working cross-browser... Blueprint is quite good (http://blueprintcss.org/), and provides a decent reset css that applies default styling to most page elements so you're starting from a clean slate.

Otherwise, nothing like practice! ;)
 
That did the trick masscrazy. I shall bear all that stuff in mind as well. Thanks. :)

rhodeski, this project might turn out to be a load of rubbish, but the main reason I'm doing it is to get some practise which I sorely need so I want to do it all from scratch. Thanks for the link though. :)
 
No worries ;) and if it helps you learn something, the project won't have been a load of rubbish ^^

If nothing else, you might find a few elements that you make on this one can be reused next time. Building up a basic template you can use on future projects is definitely something that's worthwhile.

That's where the grid systems developed from originally, but you're right, best way to learn is from scratch.... Just depends how much time you've got available ;-)
 
You must log in or register to reply here.
Back
Top Bottom