Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts

    Help working out the best method of laying out this page section?

    Hi all,

    My minds drawing a blank on the best way to possibly lay out the design ive attached to this post, can this be achieved using <dl> or <ul> tags or would there have to be divs etc?

    All suggestions appreciated

    Here's the link

    Kyle

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    That looks like a "standard" Header, 2 columns, footer layout.

    Maybe use this skeleton layout of the above as a guide.

    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">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 900px;
                    margin: 0px auto 0px auto;
                    border: 1px solid red;
                    height: auto;
                }
                #header {
                    border: 1px solid blue;
                }
                #content {
                    width: 70%;
                    float: left;
                }
                #content .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                }
                #sidebar {
                    width: 30%;
                    float: right;
                }
                #sidebar .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                    border: 1px solid green;
                }
                #footer {
                    clear: both;
                    border: 1px solid black;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="wrapper">
                <div id="header">
                    <h1>HEADER and NAVIGATION BAR</h1>
                </div>
                <div id="content">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>LEFT MAIN CONTENT COLUMN</h1>
                    </div>
                </div>
                <div id="sidebar">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>RIGHT SIDE BAR COLUMN</h1>
                    </div>
                </div>
                <div id="footer">
                    <h1>FOOTER BAR</h1>
                </div>
            </div>
        </body>
    </html>


  •  

    Posting Permissions

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