Css layout help

HTML & CSS
1

Hey, im pretty new to css and i searched around the web for a layout like this and i found some but i have trouble understanding what they want me to do. I would very much appreciate if someone could break down the steps to setup a layout like this.

2

Go to pmob.co.uk

Find the layout you want and adapt :). At the bottom of most of his layouts it will say footer where you want the “nav” but that’s no problem

In the future make a smaller image, it’s too big even for my 1600x900 screen :slight_smile:

3

Hi KyMy51, Welcome to SitePoint :slight_smile:

Here is a very simple rendition of the template you show in your image.

Just ask if you have any questions about it, the min-heights are just to hold the divs open for the demo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Layout</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
#wrap {
    width:900px;
    margin:20px auto;
    background:#FFF;
}
#header {
    width:100%;
    min-height:100px;
    overflow:hidden;/*contain child floats*/
    background:#CCC;
}
#main {
    width:100%;/*contain floats IE6*/
    overflow:hidden;/*contain child floats*/
}
#left, #right {
    float:left;
    width:450px;
    min-height:300px;
    background:orange;
}
#right {
    background:lime;
}
#footer {
    min-height:50px;
    background:#CCC;
}
</style>

</head>
<body>

<div id="wrap">
    <div id="header">Header Stuff Here</div>
    <div id="main">
        <div id="left">Left Content Here</div>
        <div id="right">Right Content Here</div>
    </div>
    <div id="footer">Nav Links Here</div>
</div>

</body>
</html>