Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS Layout help needed

Options
  • 23-08-2006 4:43pm
    #1
    axer
    Registered Users Posts: 5,517 ✭✭✭


    Hey,

    I am still learning CSS. I have completed one full tableless website successfully using pure css and fully validating. I am having problems trying to layout another.

    Please click on this image for a screenshot of how the page is now:
    layout_tn.gif

    I have the outer, header, menu and footer divs done fine but it is the main content div that is catching me.

    If you look at the image aove you will see that the #left_column div's height is shorter than #maincontent. This is a how I want it to look:
    layout_to_achieve_tn.gif

    [HTML]##############################
    HTML
    ##############################

    <div id="outer">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="left_column">
    This is the left Column<br />
    </div>
    <div id="pathway">This is the pathway</div>
    <div id="maincontent">This is the main content<br /></div>
    <div id="footer"></div>
    </div>

    #############################
    CSS
    #############################

    body {
    color: #000000;
    padding:0;
    margin:20px 0 20px 0;
    }

    #outer {
    border:1px solid #959595;
    width:754px;
    margin:auto;
    }

    #header {
    border: 1px #999999 solid;
    height: 144px;
    width: 748px;
    margin:2px 2px 1px 2px;
    }

    #menu {
    border: 1px #999999 solid;
    height:24px;
    width: 748px;
    margin:0px 0px 1px 2px;
    clear:both;
    }

    #left_column {
    height:100%;
    border: 1px #999999 solid;
    float: left;
    margin: 0px 2px 1px 2px !important;
    margin: 0px 2px 1px 1px;
    width: 186px;
    }

    #pathway {
    border: 1px #999999 solid;
    width: 558px;
    float: left;
    margin: 0px 0px 1px 0px;
    }

    #maincontent {
    border: 1px #999999 solid;
    width: 558px;
    float: left;
    height:100%;
    margin: 0px 0px 1px 0px;
    }

    #footer {
    clear:both;
    height:24px;
    border: 1px #999999 solid;
    border-width:1px 0 0 0;
    }[/HTML]


Comments

  • Options
    #2
    seamus
    Registered Users Posts: 68,317 ✭✭✭✭seamus


    Try encapsulate the pathway and main_content into another div - right_column. What you're trying to achieve is quite tricky, and breaking down complex layouts into a series of vertical divs can make life that little bit easier.

    The below code gives a (very rough!) start to this:
    [html]<html>
    <head>

    <style type="text/css">
    body {
    color: #000000;
    padding:0;
    margin:20px 0 20px 0;
    }

    #outer {
    border:1px solid #959595;
    width:754px;
    margin:auto;
    }

    #header {
    border: 1px #999999 solid;
    height: 144px;
    width: 748px;
    margin:2px 2px 1px 2px;
    }

    #menu {
    border: 1px #999999 solid;
    height:24px;
    width: 748px;
    margin:0px 0px 1px 2px;
    clear:both;
    }

    #left_column {
    height: 500px;
    border: 1px #999999 solid;
    float: left;
    margin: 0px 2px 1px 2px !important;
    margin: 0px 2px 1px 1px;
    width: 186px;
    }

    #right_column {
    width: 558px;
    float: left;
    }

    #pathway {
    border: 1px #999999 solid;
    margin: 0px 0px 1px 0px;
    }

    #maincontent {
    border: 1px #999999 solid;
    width: 558px;
    height:100%;
    margin: 0px 0px 1px 0px;
    }

    #footer {
    clear:both;
    height:24px;
    border: 1px #999999 solid;
    border-width:1px 0 0 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="left_column">
    This is the left Column<br />
    </div>
    <div id="right_column">
    <div id="pathway">This is the pathway</div>
    <div id="maincontent">This is the main content<br /></div>
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>
    [/html]


Advertisement