SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Making a sidebar full height

    Hi.

    So basically I wanna have my #sidebar to go all the way down to the bottom on all monitors and when I zoom in and out, you get it (I hope).

    My css:

    Code:
    #wrapper { width:1220px; overflow:hidden; height:100%}
    
    #sidebar { background-image:url(../images/japp.jpg); float:left; width:220px; background-color:#CCFF99; background-repeat:repeat-y; margin-bottom:0;
    }
    
    #content { margin: 0 0 0 100px; height:1000px; margin-top:100px; padding-left:200PX; }
    
    div {border:1px solid #333;}
    
    #logo {margin-top:90px; margin-left:145px; padding-bottom:20px; }
    
    .linje {width:190px; margin-left:0; margin-top:20px; color:#FFF;
    height: 1px;}
    
    .meny  {line-height:50px; text-align:right; margin-right:35px; margin-top:30px; letter-spacing:5PX; }
    
    .meny li {}
    
    .meny a:link    {color:#90a2bd; text-decoration:none }
    .meny a:visited {color:#999}
    .meny a:hover   {color:#000}
    .meny a:active  {color:#FFF}
    
    .snedstil { letter-spacing:2px; }
    
    .ha {font-style:italic;}
    
    p.menystil {font-family:Verdana, Geneva, sans-serif; font-size:12px; }
    
    p.menystilto {font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#999}
    
    p.rullande {font-family:Verdana, Geneva, sans-serif; font-size:11px; }
    
    #flytande {margin-top:30px; width:100%; }
    
    .under {
    	width:500px;
    	color:#FFF;
    	margin-top:52px;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #F0F0F0;
    	
    
    }
    
    
    
    
    
    
    
    
    
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    
    
    <body>
    
    <div id="wrapper">
      <div id="sidebar"><a href="index.html">
      
      <img id="logo" src="images/Logo.png" width="33" height="33" border="0" />
      </a>
      
      <hr align="left" class="linje" />
      
      
      <ul class="meny">
      
     
       <li>
         <p class="menystil"><a href="index.html">HEM</a></p>
       </li>
        <li>
          <p class="menystil"><a href="ommig.html">OM MIG</a></p>
        </li>
          <li>
            <p class="menystil"><a href="arbeten.html">ARBETEN</a></p>
          </li>
            <li>
              <p class="menystil"><a href="kontakt.html">KONTAKT</a></p>
            </li>
              <li>
                <p class="menystil"><a href="övrigt.html">ÖVRIGT</a></p>
              </li>
              
    
      </ul>
      
      
      </div>
    <div id="content">
      <p class="menystilto">KWPWEBDESIGN.SE - <span class="ha">hemsida av</span> <span class="snedstil">KEVIN WILLADS PETERSEN </span></p>
      
      <hr align="left" class="under" />
      <div id="flytande"> <img src="images/banner.jpg" width="919" height="212" /></div>
      
    </div>
    </div>
    </body>
    </html>
    all help is appriciated

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    With a layout like that, you are better off putting the sidebar background image on the <body> element, as that will cause it to extend to the bottom of the page.

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You're right sir.

    Thanks
    Quote Originally Posted by ralph.m View Post
    With a layout like that, you are better off putting the sidebar background image on the <body> element, as that will cause it to extend to the bottom of the page.


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
  •