Issue
I've been banging my head against the wall for hours trying to figure out this issue and think it must be something small I'm missing. I've searched online, but nothing I have found seems to work. The HTML is:
<body>
<div id="header">
<div id="bannerleft">
</div>
<div id="bannerright">
<div id="WebLinks">
<span>Web Links:</span>
<ul>
<li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
<li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
<li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
</ul>
</div>
</div>
</div>
<div id="Sidebar">
<div id="SidebarBottom">
</div>
</div>
<div id="NavigationContainer">
<ul id="Navigation">
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</div>
<div id="Main">
<!-- content -->
</div>
</body>
My full CSS is:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri, Sans-Serif;
height: 100%;
}
#header {
width: 100%;
z-index: 1;
height: 340px;
background-image: url("../../Content/images/bannercenter.gif");
background-repeat: repeat-x;
}
#header #bannerleft {
float: left;
background-image: url("../../Content/images/bannerleft.gif");
background-repeat: no-repeat;
height: 340px;
width: 439px;
z-index: 2;
}
#bannerright {
float: right;
background-image: url("../../Content/images/bannerright.gif");
background-repeat: no-repeat;
width: 382px;
height: 340px;
background-color: White;
z-index: 2;
}
#Sidebar {
width: 180px;
background: url("../../Content/images/Sidebar.png") repeat-y;
z-index: 2;
height: 100%;
position: absolute;
}
#SidebarBottom {
margin-left: 33px;
height: 100%;
background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}
#NavigationContainer {
position: absolute;
top: 350px;
width: 100%;
background-color: #bbc4c3;
height: 29px;
z-index: 1;
left: 0px;
}
#Navigation {
margin-left: 190px;
font-family: Calibri, Sans-Serif;
}
#Navigation li {
float: left;
list-style: none;
padding-right: 3%;
padding-top: 6px;
font-size: 100%;
}
#Navigation a:link, a:active, a:visited {
color: #012235;
text-decoration: none;
font-weight: 500;
}
#Navigation a:hover {
color: White;
}
#WebLinks {
float: right;
color: #00324b;
margin-top: 50px;
width: 375px;
}
#WebLinks span {
float: left;
margin-right: 7px;
margin-left: 21px;
font-size: 10pt;
margin-top: 8px;
font-family: Helvetica;
}
#WebLinks ul li {
float: left;
padding-right: 7px;
list-style: none;
}
#WebLinks ul li a {
text-decoration: none;
font-size: 8pt;
color: #00324b;
font-weight: normal;
}
#WebLinks ul li a img {
border-style: none;
}
#WebLinks ul li a:hover {
color: #bcc5c4;
}
I'd like the sidebar to stretch in height with the content of my page and leave the sidebar bottom image always at the bottom of the sidebar.
Solution
UPDATE: As this answer is still getting votes both up and down, and is at the time of writing eight years old: There are probably better techniques out there now. Original answer follows below.
Clearly you are looking for the Faux columns technique :-)
By how the height-property is calculated, you can't set height: 100% inside something that has auto-height.
Answered By - Arve Systad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.