SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with content div

    I am new here so be gentle...


    I am attempting to create a layout in CSS and all is going pretty well. I am however having problems with the content area on the center of the page. I want to create a page where it is one column content in the center and another that is 2 columns.

    Can anyone assist me in achieving this with my current layout?

    http://www.rancreative.com/clients/vg/test2.htm

    Thanks in advance!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi, welcome to sitepoint

    It looks as though you just need to float the columns but you need to remember that margins on a float will push then away from whatever is at the side. You can't float right and then put a margin left of 229px because that means nothing can come on that left side within 229px.

    IE6 also has a double margin bug and you need to add display:inline to floats (see faq on floats.)

    Don't absolutely position everything because that messes up the flow and makes things too rigid. Just let everything flow nicely one after the other withut any need for positioning.

    The footer technique you are using is a little unstable and I would recommend my method as mentioned in the faq on footers.

    You have missed the units of some of your dimensions and that means they may be treated as zero depending on what doctype you are running with.

    here is a quick refit.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>The Village Green | A Village Green Conservancy</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="css/test.css" rel="stylesheet" type="text/css">
    <link href="http://www.rancreative.com/clients/vg/css/dropdown_menu.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://www.rancreative.com/clients/vg/js/dropdown.js"></script>
    <style type="text/css">
    /* CSS Document */
    p{margin:0 0 1em 0;}
    html,
    body {
       margin:0;
       padding:0;
       height:100&#37;;
       background:#ddd8c5 url('http://www.rancreative.com/clients/vg/images/vgbg.gif') repeat-y center;
    }
    #container {
       min-height:100%;
       position:relative;
       width: 800px;
       margin:0 auto;
       background-color: #95a26a;
    }
    * html #container {height:100%}
    #header {
       background:#ff0;
       padding:10px;
       background-color: #95a26a;
    }
    #body {
       padding:0px;
       padding-bottom:53px;   /* Height of the footer */
    }
    #nav {
        width:800px;
        background-color: #ffffff;
    }
    
    #flash {
        width: 800px;
        height: 269px;
        background-color: #ffffff;
    }
    
    #contentFull {
        width: 754px;
        margin:23px 23px 0 23px;
        padding: 10px 10px 0px 10px;
        background-color: #c4c8a9;
    }
    
    #contentFullFooter {
    }
    
    #contentSide {
        width: 525px;
        position: relative;
        margin:10px 23px 0 0;
        padding: 10px 10px 0px 10px;
        background-color: #c4c8a9;
        float: right;
        display:inline;
    }
    
    #sidebar {
        width: 183px;
        position: relative;
        margin:10px 0 0 23px;
        padding: 10px 10px 0px 10px;
        background-color: #c4c8a9;
        float: left;
        display:inline;
    }
    
    #footer {
      height:53px;   /* Height of the footer */
      background: #95a26a url(http://www.rancreative.com/clients/vg/images/hr.gif) repeat-x center top;
      text-align:center;
         width: 754px;
        margin:-53px auto 0;
        position:relative;
    }
    #footer ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    #footer li{display:inline;}
    #footer a {
        text-decoration: none;
        padding: 15px 3px 15px 3px;
        font-size: .7em;
        color: #ffffff;
    }
    
    #footer a:hover {
        text-decoration: none;
        padding: 8px 3px 8px 3px;
        font-size: .7em;
        color: #5e6d2f;
    }
    
    .footerText {
        font-size: .7em;
        color: #5e6d2f;
    }
    
    a.header {
        text-decoration: none;
        padding: 8px 3px 0px 300px;
        font-size: .7em;
        color: #ffffff;
    }
    
    a:hover.header {
        text-decoration: none;
        padding: 8px 3px 0px 300px;
        font-size: .7em;
        color: #5e6d2f;
    }
    .clearit{
        height:1px;
        overflow:hidden;
        margin-top:-1px;
        clear:both;
    }
    
    </style>
    <!--[if lte IE 7]>
    <style>
    #menuwrapper, #menubar ul a {height: 1%;}
    a:active {width: auto;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="container">
        <div id="header"> <a href="index.htm"><img src="http://www.rancreative.com/clients/vg/images/vglogo.gif" width="417" height="87" alt="The Village Green - A Village Conservancy Project" border="0"></a> <a href="" class="header">Contact Us</a> </div>
        <div id="body">
            <div id="nav">
                <div id="menuwrapper">
                    <ul id="menubar">
                        <li class="green"><a href="index.htm">Home</a></li>
                        <li><a class="trigger" href="about_us.htm">About Us</a>
                            <ul>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Joy Garden</a></li>
                                <li><a href="#">Kara Leigh Pulley Park</a></li>
                                <li><a href="#">Highlands Land Trust</a></li>
                                <li><a href="#">Sculpture on the Green</a></li>
                            </ul>
                        </li>
                        <li><a class="trigger" href="sculpture_on_the_green.htm">Sculpture on the Green</a></li>
                        <li><a class="trigger" href="#">Kara Leigh Pulley Park</a></li>
                        <li><a class="trigger" href="#">Annual Events</a>
                            <ul>
                                <li><a href="#">???</a></li>
                                <li><a href="#">Calendar</a></li>
                            </ul>
                        </li>
                        <li><a class="trigger" href="#">Joy Garden Tour</a></li>
                        <li><a class="trigger" href="#">Resources</a></li>
                        <li><a class="trigger" href="#">Board of Directors</a>
                            <ul>
                                <li><a href="#">Bio</a></li>
                                <li><a href="#">Bio</a></li>
                                <li><a href="#">Bio</a></li>
                                <li><a href="#">Bio</a></li>
                                <li><a href="#">Support/Join Board</a></li>
                            </ul>
                        </li>
                        <li><a class="trigger" href="#">Support</a>
                            <ul>
                                <li><a href="#">Joy Garden Tour</a></li>
                                <li><a href="#">Village Green</a></li>
                                <li><a href="#">Endowment Fund</a></li>
                                <li><a href="#">Gift Shop</a></li>
                                <li><a href="#">Donation - 501c3 Form</a></li>
                            </ul>
                        </li>
                        <li><a class="trigger" href="#">Volunteer</a>
                            <ul>
                                <li><a href="#">Maintenance</a></li>
                                <li><a href="#">Gardens</a></li>
                                <li><a href="#">Fall Fling</a></li>
                                <li><a href="#">Board</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div class="clearit"></div>
                </div>
            </div>
            <div id="flash"><img src="http://www.rancreative.com/clients/vg/images/flash.gif" width="800" height="269" alt="*"></div>
    
            <div id="sidebar"><p>column 1 goes here</p></div>
            <div id="contentSide"><p>column2 goes here</div>
            <div class="clearit"></div>
        
        </div>
    </div>
    <div id="footer">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Scultpure on the Green</a></li>
            <li><a href="">Kara Leigh Pulley Park</a></li>
            <li><a href="">Annual Events</a></li>
            <li><a href="">Joy Garden Tour</a></li>
            <li><a href="">Resources</a></li>
            <li><a href="">Board of Directors</a></li>
            <li><a href="">Support</a></li>
            <li><a href="">Volunteer</a></li>
        </ul>
        <p class="footerText">&copy; 2007 Village Green of Cashiers, North Carolina</p>
    </div>
    </body>
    </html>
    Hop that helps

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very helpful, thank you!!!

    The floats are what tends to give me a problem. I am working on my skills!

    Quote Originally Posted by Paul O'B View Post
    Hi, welcome to sitepoint

    It looks as though you just need to float the columns but you need to remember that margins on a float will push then away from whatever is at the side. You can't float right and then put a margin left of 229px because that means nothing can come on that left side within 229px.

    IE6 also has a double margin bug and you need to add display:inline to floats (see faq on floats.)

    Don't absolutely position everything because that messes up the flow and makes things too rigid. Just let everything flow nicely one after the other withut any need for positioning.

    The footer technique you are using is a little unstable and I would recommend my method as mentioned in the faq on footers.

    You have missed the units of some of your dimensions and that means they may be treated as zero depending on what doctype you are running with.

    here is a quick refit.


    Hop that helps

  4. #4
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am having one more issue. I am now trying to get it in a single column as well for another template but it keeps jutting out over the right side of my layout.

    Thanks!


    Quote Originally Posted by Paul O'B View Post
    Hi, welcome to sitepoint

    It looks as though you just need to float the columns but you need to remember that margins on a float will push then away from whatever is at the side. You can't float right and then put a margin left of 229px because that means nothing can come on that left side within 229px.

    IE6 also has a double margin bug and you need to add display:inline to floats (see faq on floats.)

    Don't absolutely position everything because that messes up the flow and makes things too rigid. Just let everything flow nicely one after the other withut any need for positioning.

    The footer technique you are using is a little unstable and I would recommend my method as mentioned in the faq on footers.

    You have missed the units of some of your dimensions and that means they may be treated as zero depending on what doctype you are running with.

    here is a quick refit.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>The Village Green | A Village Green Conservancy</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="css/test.css" rel="stylesheet" type="text/css">
    <link href="http://www.rancreative.com/clients/vg/css/dropdown_menu.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://www.rancreative.com/clients/vg/js/dropdown.js"></script>
    <style type="text/css">
    /* CSS Document */
    p{margin:0 0 1em 0;}
    html,
    body {
       margin:0;
       padding:0;
       height:100%;
       background:#ddd8c5 url('http://www.rancreative.com/clients/vg/images/vgbg.gif') repeat-y center;
    }
    #container {
       min-height:100%;
       position:relative;
       width: 800px;
       margin:0 auto;
       background-color: #95a26a;
    }
    * html #container {height:100%}
    #header {
       background:#ff0;
       padding:10px;
       background-color: #95a26a;
    }
    #body {
       padding:0px;
       padding-bottom:53px;   /* Height of the footer */
    }
    #nav {
        width:800px;
        background-color: #ffffff;
    }
    
    #flash {
        width: 800px;
        height: 269px;
        background-color: #ffffff;
    }
    
    #contentFull {
        width: 754px;
        margin:23px 23px 0 23px;
        padding: 10px 10px 0px 10px;
        background-color: #c4c8a9;
    }
    
    #contentFullFooter {
    }
    
    #contentSide {
        width: 525px;
        position: relative;
        margin:10px 23px 0 0;
        padding: 10px 10px 0px 10px;
        background-color: #c4c8a9;
        float: right;
        display:inline;
    }
    
    #sidebar {
        width: 183px;
        position: relative;
        margin:10px 0 0 23px;
        padding: 10px 10px 0px 10px;
        background-color: #c4c8a9;
        float: left;
        display:inline;
    }
    
    #footer {
      height:53px;   /* Height of the footer */
      background: #95a26a url(http://www.rancreative.com/clients/vg/images/hr.gif) repeat-x center top;
      text-align:center;
         width: 754px;
        margin:-53px auto 0;
        position:relative;
    }
    #footer ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    #footer li{display:inline;}
    #footer a {
        text-decoration: none;
        padding: 15px 3px 15px 3px;
        font-size: .7em;
        color: #ffffff;
    }
    
    #footer a:hover {
        text-decoration: none;
        padding: 8px 3px 8px 3px;
        font-size: .7em;
        color: #5e6d2f;
    }
    
    .footerText {
        font-size: .7em;
        color: #5e6d2f;
    }
    
    a.header {
        text-decoration: none;
        padding: 8px 3px 0px 300px;
        font-size: .7em;
        color: #ffffff;
    }
    
    a:hover.header {
        text-decoration: none;
        padding: 8px 3px 0px 300px;
        font-size: .7em;
        color: #5e6d2f;
    }
    .clearit{
        height:1px;
        overflow:hidden;
        margin-top:-1px;
        clear:both;
    }
    
    </style>
    <!--[if lte IE 7]>
    <style>
    #menuwrapper, #menubar ul a {height: 1%;}
    a:active {width: auto;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="container">
        <div id="header"> <a href="index.htm"><img src="http://www.rancreative.com/clients/vg/images/vglogo.gif" width="417" height="87" alt="The Village Green - A Village Conservancy Project" border="0"></a> <a href="" class="header">Contact Us</a> </div>
        <div id="body">
            <div id="nav">
                <div id="menuwrapper">
                    <ul id="menubar">
                        <li class="green"><a href="index.htm">Home</a></li>
                        <li><a class="trigger" href="about_us.htm">About Us</a>
                            <ul>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Joy Garden</a></li>
                                <li><a href="#">Kara Leigh Pulley Park</a></li>
                                <li><a href="#">Highlands Land Trust</a></li>
                                <li><a href="#">Sculpture on the Green</a></li>
                            </ul>
                        </li>
                        <li><a class="trigger" href="sculpture_on_the_green.htm">Sculpture on the Green</a></li>
                        <li><a class="trigger" href="#">Kara Leigh Pulley Park</a></li>
                        <li><a class="trigger" href="#">Annual Events</a>
                            <ul>
                                <li><a href="#">???</a></li>
                                <li><a href="#">Calendar</a></li>
                            </ul>
                        </li>
                        <li><a class="trigger" href="#">Joy Garden Tour</a></li>
                        <li><a class="trigger" href="#">Resources</a></li>
                        <li><a class="trigger" href="#">Board of Directors</a>
                            <ul>
                                <li><a href="#">Bio</a></li>
                                <li><a href="#">Bio</a></li>
                                <li><a href="#">Bio</a></li>
                                <li><a href="#">Bio</a></li>
                                <li><a href="#">Support/Join Board</a></li>
                            </ul>
                        </li>
                        <li><a class="trigger" href="#">Support</a>
                            <ul>
                                <li><a href="#">Joy Garden Tour</a></li>
                                <li><a href="#">Village Green</a></li>
                                <li><a href="#">Endowment Fund</a></li>
                                <li><a href="#">Gift Shop</a></li>
                                <li><a href="#">Donation - 501c3 Form</a></li>
                            </ul>
                        </li>
                        <li><a class="trigger" href="#">Volunteer</a>
                            <ul>
                                <li><a href="#">Maintenance</a></li>
                                <li><a href="#">Gardens</a></li>
                                <li><a href="#">Fall Fling</a></li>
                                <li><a href="#">Board</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div class="clearit"></div>
                </div>
            </div>
            <div id="flash"><img src="http://www.rancreative.com/clients/vg/images/flash.gif" width="800" height="269" alt="*"></div>
    
            <div id="sidebar"><p>column 1 goes here</p></div>
            <div id="contentSide"><p>column2 goes here</div>
            <div class="clearit"></div>
        
        </div>
    </div>
    <div id="footer">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Scultpure on the Green</a></li>
            <li><a href="">Kara Leigh Pulley Park</a></li>
            <li><a href="">Annual Events</a></li>
            <li><a href="">Joy Garden Tour</a></li>
            <li><a href="">Resources</a></li>
            <li><a href="">Board of Directors</a></li>
            <li><a href="">Support</a></li>
            <li><a href="">Volunteer</a></li>
        </ul>
        <p class="footerText">&copy; 2007 Village Green of Cashiers, North Carolina</p>
    </div>
    </body>
    </html>
    Hop that helps

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You had a single column in your original layout or did you mean something else.

    I'm just going offline now so you'll have to post your code and I'll get back to you tomorrow (or one of the others members may look in and help before that).

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New issue...

    I was in another world when I asked that question that I already had the answer to. Sorry.

    Now I am on the task of getting my side nav to work in IE.

    Thanks!

    Quote Originally Posted by Paul O'B View Post
    You had a single column in your original layout or did you mean something else.

    I'm just going offline now so you'll have to post your code and I'll get back to you tomorrow (or one of the others members may look in and help before that).
    Last edited by rancreative; Dec 5, 2007 at 09:23.


Bookmarks

Posting Permissions

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