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:
#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:
<!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