View Single Post

karinne · #5 (**permalink**) Apr 5th, 2007, 18:45

You have to columns in there right? So ... I would do

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    html, body, div { margin: 0; padding: 0; }
    
    #header, #container, #footer {
        width: 780px;
    }
    
    #container {
        overflow: auto;
    }
    
    #menu {
        width: 200px;
        float: left;
        background-color: #900
    }
    
    #content {
        width: 570px;
        margin-left: 10px;
        float: right;
        background-color: #090;
    }
    
    #footer {
        background-color: #009;
        color: #fff;
    }
    </style>
    
</head>

<body>

<div id="header"><h1>some header stuff here</h1></div>

<div id="container">

    <div id="menu">menu here<br /><br /><br />all the way!    </div>
    
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis feugiat. Curabitur condimentum ligula imperdiet lectus. Sed justo. Suspendisse faucibus. Morbi sit amet diam. Phasellus egestas elit ac ante. Suspendisse sed tortor. Mauris vel nunc et risus pharetra elementum. Phasellus accumsan risus non arcu. Phasellus mollis eros id lorem. Sed nec felis. In eget diam fringilla risus accumsan malesuada. Cras urna neque, convallis quis, consequat sed, tristique at, metus. Nulla tincidunt, lacus in feugiat posuere, diam pede mattis nisi, vulputate feugiat massa justo et arcu. Integer pretium tellus et dui.</p>
        
        <p>Vivamus sit amet lectus. Sed lorem tellus, sagittis vel, volutpat eu, sodales at, tellus. Nunc quis ipsum et erat malesuada suscipit. Integer urna mi, feugiat et, lacinia eu, suscipit nec, nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam iaculis magna eget nunc. Curabitur aliquam vestibulum enim. Duis mattis varius leo. Vivamus vel turpis. Quisque lectus massa, euismod mattis, aliquam at, feugiat at, massa. Vivamus eget enim eget felis congue fringilla. Phasellus nec nibh eget lectus pretium ullamcorper.</p>
        
        <p>Nullam eleifend. Fusce sed nunc. Ut consequat. Etiam interdum massa. Nulla aliquam, dui quis mollis eleifend, est massa pretium justo, a porttitor pede tortor at velit. Morbi tellus sapien, condimentum eget, sollicitudin nec, faucibus pretium, velit. Morbi eu odio scelerisque metus porta venenatis. Aliquam erat volutpat. Curabitur convallis, tellus eget scelerisque euismod, metus ligula molestie elit, a varius risus nibh sit amet mi. Mauris erat est, fringilla sit amet, pellentesque eget, dapibus vel, augue. Aliquam justo quam, varius non, ornare sed, lobortis sed, ante. Morbi rutrum.</p>
    </div>

</div>

<div id="footer">and some copyright bla bla here</div>

</body>
</html>

That's a basic 2-column layout with some text and color so you see what's happening with everything. Jjust copy/paste the whole thing and open it a browser.

So in this situation, you would have EEE, BBB and TTT in #content