MC Web Designs
- Joined
- Oct 28, 2010
- Messages
- 888
- Reaction score
- 111
You must be registered to see links
- This is the image of what I am creating. I need the sidebar to go down 100% in height of the parent div tag. I have set min-height: 100% on the actual sidebar div but it doesn't seem to be working.
Some help would be greatly appreciated.
This is the HTML of the sidebar on the page.
Code:
<div class="sidebar">
<div class="sidebar-panel">
<div class="sidebar-splitter"></div>
<div class="sidebar-header">Need Help?</div>
<div class="sidebar-content">
Post a ticket and one of our representatives will be deal with your problem when they are next available.
<a href="#ticket" class="post-ticket">Post a Ticket!</a>
</div>
<div class="sidebar-splitter-flip"></div>
</div>
<div class="sidebar-panel">
<div class="sidebar-splitter"></div>
<div class="sidebar-header">Recommend Us!</div>
<div class="sidebar-content">
Login to Recommend a friend and earn special offers!
<br /><a href="login.php" class="top-bar-login-button">Login</a>
</div>
</div>
<div class="sidebar-splitter-flip"></div>
<div class="sidebar-splitter"></div>
</div>
<div class="clear"></div>
This is the CSS
Code:
.sidebar {
background-color: #F4F4F4;
float: right;
width: 300px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
text-align: center;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
height: 100%;
min-height: 100%;
}
.sidebar-panel {
}
.sidebar-header {
color: #666;
font-family: Tahoma, Geneva, sans-serif;
text-transform: none;
font-weight: bold;
font-size: 18px;
text-align: center;
padding: 5px;
margin: 0px;
}
.sidebar-content {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
color: #666;
padding: 5px;
font-size: 12px;
}
.sidebar-splitter {
background-image: url(../img/sidebar-spitter.jpg);
background-position: center top;
height: 17px;
width: 199px;
margin-right: auto;
margin-left: auto;
}
.sidebar-splitter-flip {
background-image: url(../img/sidebar-spitter-flip.jpg);
background-position: center top;
height: 17px;
width: 199px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
Thanks, Matt.
Last edited: