[thelist] YUI - Grid Layout Issues

Chris Ditty cditty at gmail.com
Wed Aug 23 08:33:57 CDT 2006


I am trying to teach myself Aja and i figured the best way was to rebuild my
site using it.

I was finally able to get the basic layout done, but I seem to be having
problems with positioning.  The left side is fine, but I cannot get the
center and right sides to co-operate.  The right side has to be 190px wide
with a 10px buffer on both sides and the center needs to be dynamic between
the left and right sides.  Below is the stylesheet and the code that I am
using.  Can someone show me the errors of my ways.

CSS
-------
body{
    color: #333333;
    background-color: #6B965A;
    margin:0px;
    padding:0px;
    font:11px verdana, arial, helvetica, sans-serif;
}
#doc{
    width: 100%;
}
#page_header{
    height: 77px;
    background-color: #841010;
    border-bottom: 2px solid #000000;
}
#leftNav{
    width: 150px;
    position:absolute;
    top:87px;
    border: 1px solid black;
    background-color: #C08C8D;
    width: 150px;
    padding: 10px;
    color: #000000;
}
#rightNav{
    color: #333333;
    position:absolute;
    width:190px;
    top:87px;
    right:10px;
    border:1px solid black;
    background-color:#C08C8D;
}
.smallHeaders{
    font:bold 12px/14px verdana, arial, helvetica, sans-serif;
    margin:0px 0px 5px 0px;
    padding: 0px;
}
.underline{
    border-bottom: 1px solid black;
}
#contentSection{
    border: 1px solid black;
    background-color: #cccccc;
    position:absolute;
    top: 87px;
    right: 100px;
    left: 205px;
    padding: 10px;
    border: 1px solid black;
    background-color: #cccccc;
}

HTML
--------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>My Page</title>
    <link rel="stylesheet" type="text/css" href="/Y-Ajax/grids/reset.css">
    <link rel="stylesheet" type="text/css" href="/Y-Ajax/grids/fonts.css">
    <link rel="stylesheet" type="text/css" href="/Y-Ajax/grids/grids.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="doc" class="yui-t1">
    <div id="page_header"></div>
    <div id="bd"><!--- Outer Template --->
        <div id="yui-t1">
            <div id="leftNav" class="yui-b sideSpacer">
                <div class="smallHeaders underline">Site Navigation</div>
            </div>
            <div id="yui-main">
                <div class="yui-gc">
                    <div id="contentSection" class="yui-b">
                        <div class="yui-u">Center</div>
                    </div>
                    <div id="rightNav" class="yui-b">
                        <div class="yui-u">Shopping Cart</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="ft"></div>
</div>
</body>
</html>

Thanks



More information about the thelist mailing list