SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: Side bar height same as content div height

    Hi there, I am wondering how I would go about making the sidebar div flow to the height of the content. The first attached image is what it currently looks like, and the second attached image is what I want to achieve.
    step0.gif

    step1.gif


    Here is the HTML & CSS If you need to take a gander at it:
    HTML Code:
    HTML Code:
    <body>
    <div id="wrapper">
    <div id="container">
    
    <div id="sidemenu" class="frame">
    	<ul>
        	<li><a href="#" title="TITLE" tabindex="1">Menu Option 1</a></li>
            <li><a href="#" title="TITLE" tabindex="2">Menu Option 2</a></li>
            <li><a href="#" title="TITLE" tabindex="3">Menu Option 3</a></li>
            <li><a href="#" title="TITLE" tabindex="4">Menu Option 4</a></li>
            <li><a href="#" title="TITLE" tabindex="5">Menu Option 5</a></li>
        </ul>
        
        <div class="menublock">
        <h3>Item Title</h3>
        Real text will go here
        <!-- .menublock ends -->
        </div>
        
        <div class="menublock">
        <h3>Item Title</h3>
        Real text will go here
        <!-- .menublock ends -->
        </div>
        
        <div class="menublock">
        <h3>Item Title</h3>
        Real text will go here
        <!-- .menublock ends -->
        </div>
    
    <!-- #sidemenu ends -->
    </div>
    
    <div id="topbanner" class="frame">
    	<div id="imagearea">
        	<img src="images/fillerimage.gif" alt="FIller Image" />
        <!-- #imagearea ends -->
        </div>
    
    <!-- #topbanner ends -->
    </div>
    
    <div id="contentarea" class="frame">
    	<div id="content">
        	<h1>Advisters for IT</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum nibh sed felis. Vivamus at nibh in risus molestie fermentum. In hac habitasse platea dictumst. Integer est. Mauris massa quam, sagittis ut, malesuada a, vulputate a, felis. Ut quis augue. Phasellus tincidunt, lacus eget laoreet semper, odio lectus vehicula nisi, ac placerat risus mi id lectus. Sed non ipsum et augue dignissim dictum. Fusce feugiat massa eu orci. Vivamus eu risus eu elit vehicula pharetra. Praesent ligula. Aliquam lectus. Curabitur dictum erat ac nisi lobortis tincidunt.</p>
    
    <p>Cras quis pede. Pellentesque sed justo. Vestibulum lacus leo, tempor ac, vulputate in, aliquet elementum, orci. Sed cursus venenatis libero. Suspendisse malesuada neque eget odio. Suspendisse nibh nunc, scelerisque in, ornare at, dapibus et, ante. Vestibulum condimentum ligula. Maecenas ultrices nulla condimentum pede. Quisque scelerisque elit vel magna. Aenean porta mauris quis lorem. Morbi lorem sapien, gravida nec, consectetuer quis, blandit vitae, nisl. Donec at nulla vel orci tincidunt rhoncus. Sed erat. Sed laoreet nulla sit amet est. Aliquam erat volutpat.</p>
    
    <p>Nulla facilisi. Duis laoreet euismod felis. In consectetuer. Pellentesque congue. Maecenas eu nisl. Etiam dictum ullamcorper sem. Aliquam pretium eros eget ligula. Sed eu risus. Vivamus et eros ut velit adipiscing pulvinar. Nullam ac libero in turpis faucibus varius. In id odio eu dui rutrum rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur diam elit, congue pellentesque, nonummy sed, condimentum ut, odio. Mauris consequat lobortis lectus. Vivamus accumsan enim vel velit. Vivamus mi. Nullam arcu arcu, ornare at, eleifend at, luctus eu, lectus.</p>
        </div>
        <!-- #content ends -->
        
        <div id="newsbar">
        <h2>News</h2>
        <p>Aliquam ut lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce metus mi, dapibus in, fringilla ac, congue a, sapien. Vestibulum faucibus ipsum lacinia urna. Donec ac sapien id purus pulvinar posuere. Suspendisse odio. Quisque porttitor elementum tortor. Pellentesque mollis iaculis nulla. Vestibulum pharetra condimentum turpis. Praesent placerat neque in mauris eleifend mattis. Morbi libero odio, consectetuer sed, sollicitudin sed, interdum vel, felis. Donec turpis sapien, aliquam vel, semper sit amet, pulvinar in, dui. Sed vel libero at tortor sodales luctus. Nulla ut risus vitae elit venenatis fringilla. In magna mi, volutpat auctor, nonummy sit amet, fringilla suscipit, mauris.</p>
        <!-- #newsbar ends -->
        </div>
        </div>
    <!-- #contentarea ends -->
    </div>
    
    
    <!-- #container, #wrapper div ends, respectively -->
    </div>
    </div>
    </body>
    CSS Code:
    Code:
    /*
    2O Finance Template
    CSS'd by: Nathaniel B | Sept. 18th 2007, 12:03PM EST
    */
    /* Core Stuff ~~~~~~~~~~~~~~~~~~~~~~ */
    body {
    background:url(../images/pagebg.gif) repeat-x top;
    }
    #wrapper {
    width:818px;
    height:auto;
    margin:0px auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10pt;
    color:#3f3f63;
    }
    
    #container {
    width:818px;
    height:auto;
    float:left;
    }
    
    .frame {
    background:#e9e9e9;
    border:1px solid #d5d5d5;
    }
    /* Top Banner Stuff ~~~~~~~~~~~~~~~~~~~~~~ */
    #topbanner {
    width:636px;
    height:266px;
    float:right;
    margin:0px 0px 10px 0px;
    }
    
    #imagearea {
    width:615px;
    height:240px;
    margin:10px 0px 0px 10px;
    }
    
    /* Content Stuff ~~~~~~~~~~~~~~~~~~~~~~ */
    #contentarea {
    width:616px;
    height:auto;
    float:right;
    padding:10px;
    }
    
    #contentarea h1 {
    font-family:"Arial Narrow", Arial, sans-serif;
    font-size:17pt;
    border-left:8px solid #3f3f63;
    margin:0px 0px 15px 0px;
    padding:0px 0px 0px 5px;
    }
    
    #contentarea h2 {
    font-size:10pt;
    background:#3f3f63;
    border:1px solid #d5d5d5;
    padding:3px;
    color:#FFFFFF;
    margin:0px 0px 15px 0px;
    }
    
    #content {
    width:428px; /*Width is not really needed, but just incase */
    height:auto;
    float:left;
    text-align:justify;
    }
    #newsbar {
    width:168px;
    height:auto;
    float:right;
    margin:0px 0px 0px 20px;
    }
    /* Side Menu Stuff ~~~~~~~~~~~~~~~~~~~~~~ */
    #sidemenu {
    width:175px;
    float:left;
    height:inherit;
    }
    
    #sidemenu ul {
    list-style:none;
    margin:10px 10px 30px 10px;
    padding:0px;
    }
    
    #sidemenu ul li {
    background:url(../images/menuoptbg.gif) repeat-x;
    height:30px;
    line-height:30px;
    border:1px solid #d5d5d5;
    margin:0px 0px 5px 0px;
    padding:0px 0px 0px 9px;
    font-family:"Arial Narrow", Arial, sans-serif;
    font-size:12pt;
    }
    
    #sidemenu ul li a {
    background:url(../images/menuoptbullet.gif) no-repeat left;
    padding:0px 0px 0px 22px;
    color:#3f3f63;
    text-decoration:none;
    }
    
    #sidemenu ul li a:hover {
    text-decoration:underline;
    }
    
    .menublock {
    background:url(../images/menudivider.gif) top center no-repeat;
    padding:12px 5px 0px 5px;
    margin:10px;
    }
    
    .menublock h3 {
    margin:0px;
    font-size:10pt;
    }

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your particular case (ignoring the mis-use of headings and other semantic no-nos), I'd just assign a common background color to either the BODY, #container or #wrapper selectors.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan,

    Could you breifly point out other semantic no-nos and the misuse of the heading tag? I'd love to get more enlightened in those regards.

    Thanks

    P.S. I'll try your background trick

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    putting your menu before your header, wrapping your menu around a DIV instead of using the unordered list, and stuff like that.

    By the way, what's in that content area underneath the menu anyway?

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah okay cool cool, those are completely valid and understood. Putting the menu before the header was an overlook-see for me, and I thank you for pointing that out hehe

    In regards to the menu items being wrapped in divs and not in a ul, I am not sure what you are reffering to?

    My menu is within a ul, I think you're talking about those three boxes classed named menublock, which, if that is the case then I can see why you've thought that way. I should have named them something else. They are not actually navigation items, but rather three text-ad boxes Should I put those in a list though? I didn't think I should as it contained a header and a breif blurb of text.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I meant the DIV wrapping around your menu.

    And if those are ads, then I'd consider them to be sidebar content that can be ridden underneath the menu with some negative margins and a float.


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
  •