I'm trying to not use adobe pre-defined CSS templates and instead create my own. I have a 130px height header i want to span the entire width. Beneath that, I want fixed columns of 150px on the far left and far right of the page. The middle, I want to span the entire width of the browser. All of these contained in a "container" div.
My header is fine, floated left and width = 100%. Next, left column width = 150px and floated left. No problem. Then, the "content", which when i float left appears in line where it should be. Then the 150px-wide right column, also floated left.
What do I set the content (middle div) width to be? If I do 100%, it puts it beneath the left column - even if I set margins of 150px on both sides to accommodate the columns. If I do "auto" it also breaks the horizontal integrity. Right now it's at 70%, which makes them all line up, but doesn't take up the full screen at large resolutions. (I have a minimum width set). This seems like it should be an easy fix - my hunch is that it has something to do with the "absolute" positioning of the container div. Thanks for any ideas/help.
Here is the link to the page:
http://www.mynextbit.com/Fifty%20Stars%20Thirteen%20Stripes/index.html
Here is my code:
.container {
float: left;
height: auto;
padding: 0px;
margin: 0px;
left: 0px;
top: 0px;
clip: rect(0px,auto,auto,0px);
position: absolute;
width: auto;
min-width: 1024px;
}
.header {
}
.leftcol {
width: 150px;
float: left;
text-align: center;
}
.content {
height: auto;
float: left;
text-indent: 10px;
overflow: scroll;
width: 70%;
min-width: 700px;
}
.rightcol {
float: left;
width: 150px;
clear: none;
}
change the order of the divs.
<div class="leftcol"></div>
<div class="rightcol"></div>
<div class="content"></div>
then in CSS change right col to
.rightcol { float: right; }
remove the float: left; and width: 70%; from the content div (no float, no width)
Here's a fiddle: jsfiddle.net/D4fPh/
Sep 17, 2014 - Update with executable snippet:
#charset "utf-8";
/* CSS Document */
.container {
float: left;
height: auto;
padding: 0px;
margin: 0px;
left: 0px;
top: 0px;
clip: rect(0px,auto,auto,0px);
position: absolute;
width: auto;
min-width: 1024px;
}
.header {
/* [disabled]float: left; */
/* [disabled]height: 130px; */
width: 100%;
}
.leftcol {
/* [disabled]height: auto; */
width: 150px;
float: left;
text-align: center;
/* [disabled]position: absolute; */
/* [disabled]left: 0px; */
/* [disabled]top: 130px; */
/* [disabled]clear: left; */
/* [disabled]min-width: 150px; */
/* [disabled]max-width: 160px; */
}
.content {
height: auto;
text-indent: 10px;
overflow: scroll;
/* [disabled]margin-left: 150px; */
/* [disabled]margin-right: 150px; */
min-width: 700px;
}
.rightcol {
float: right;
/* [disabled]height: auto; */
width: 150px;
clear: none;
/* [disabled]min-width: 150px; */
/* [disabled]max-width: 160px; */
}
body {
background-image: url(../Fifty%20Stars%20Thirteen%20Stripes/fsts_banner_repeatstripes.png);
background-repeat: repeat-x;
}
leftcollinks {
color:#710808;
text-align:center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:16px;
line-height:1.8;
font-weight:bold;
}
p {
margin-left:15px;
margin-right: 15px;
font-family: Tahoma, Geneva, sans-serif;
}
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Template_FSTS_Main.dwt" codeOutsideHTMLIsLocked="false" --><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Fifty Stars Thirteen Stripes</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
body {
background-image: url(fsts_banner_repeatstripes.png);
}
</style>
<!-- InstanceEndEditable -->
<link href="styles.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css"><script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script></head>
<body screen_capture_injected="true">
<div class="container">
<div class="header"><img src="fsts_banner_name.png" width="400" height="130" alt="Fifty Stars Thirteen Stripes"></div>
<div class="leftcol"><leftcollinks>
American Politics<br>
The Media<br>
History<br>
Economy<br>
Education<br>
Foreign Policy<br>
Philosophy<br>
Social Programs<br>
Faith & Religion<br>
U.S. Departments<br>
Science & Tech<br>
Books & Resources<br>
Miscellaneous<br>
<font color="#060648">
About FSTS</font></leftcollinks><br>
</div>
<!-- InstanceBeginEditable name="EditRegion3" -->
<div class="rightcol"><leftcollinks>
American Politics<br>
The Media<br>
History<br>
Economy<br>
Education<br>
Foreign Policy<br>
Philosophy<br>
Social Programs<br>
Faith & Religion<br>
U.S. Departments<br>
Science & Tech<br>
Books & Resources<br>
Miscellaneous<br>
<font color="#060648">
About FSTS</font></leftcollinks><br></div><div class="content">
<p>I've been thinking. That's the first good. For 31 years I haven't been...</p>
<p>I'm writing this on a typical foggy evening in Monterey, California during the middle of September. I'm staring at a stack of books on my desk, each of them unread for reasons that have defined the first three decades of my life. Reasons I'm not proud of, and have little or nothing to show for. Forgiving myself is harder than I would have expected. However, self pity it seems, will lead me nowhere - something I learned recently from a man I like to call myself. </p>
<p>What is it I want? Knowledge? To do what with? Would I be satisfied with reading every good book, article, newspaper and documentary in the world? To be filled with that much knowledge must be empowering, but logic says that's not enough. The man who invented the wrench didn't do it so he could hang it on a wall. He designed and manufactured it to serve a purpose. What good is knowledge if it doesn't serve a purpose? Knowledge must serve as a tool to create, to think, to design, to perform, to <i>do</i> something. Otherwise, the capacity of our brain has been wasted. Have I come to the right conclusion?</p>
<p>'Tis a crafty trap, the world has sprang on the minds of society. We've become content with settling on another man's reasoning. Television, the internet, even the Government is happy to do the hard work for us. They'll simply tell us what to think by embedding a message behind a nice face, some modern special effects, feelings, anything at all to hold our attention. How many people know who their congressman is? What laws have gone into effect in your area in the past couple years? Which 2012 Presidential candidate better reflects your values? Is voting important? Could you explain why? How many of us know when the last U.S. servicemember died overseas? Where do your tax dollars go? If you don't know any of that but you know who Justin Beiber is dating - you're a victim of the trap. You've been conditioned to believe that Justin Beiber is important. How many of us work a dead-end job, and yet spend our free time watching "our shows" and opinion-filled news, playing video games, partying, etc? Worse yet, how many of us have no job at all and do the same thing?</p>
<p>Well, if that is the world you desire, you can have it. I'm leaving it and never going back. I cannot fathom the hours, days, years I've wasted filling the mold of what today's America wanted me to be. I had no idea how to use my brain. I didn't know what I wanted, so I let someone else tell me. I didn't have values, morals, or principles that I derived on my own so I listened to the first shmuck with a smile and adopted his. I felt before I thought, and it's brought me down a road of self pity and guilt. I didn't know whose standard I was trying to live up to, but I knew I was always falling short. I was never quite satisfied with life. </p>
<p> More to follow...</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- InstanceEnd -->
</body></html>
.content will scale height to fit all your content by this css:
.header {
position: absolute;
width: 100%;
height: 130px;
top: 0;
left: 0;
background: #f00;
}
.container {
position: relative;
padding-top: 130px;
height: 100%;
}
.left,
.right {
position: absolute;
width: 150px;
height: 100%;
left: 0;
top: 0;
background: #0f0;
}
.right {
left: auto;
right: 0;
background: #0f0;
}
.center {
padding: 0 150px;
background: #00f;
}
<div class="header">I'm a header</div>
<div class="container">
<div class="left">I'm on the left</div>
<div class="right">I'm on the right</div>
<div class="center">I'm center</div>
</div>
The example above as fiddle (displayed more properly):
http://jsfiddle.net/en6Cr/
Related
I am new to web development and am creating a website portfolio. My website is www.laurenschaller.com. Everything is working the way I want it to, except sometimes (not always, if I refresh it goes back to normal) when I open it up in chrome, the two waves that wrap the text "Who I Am" overlap that text, like this http://imgur.com/Zxt7bEE
here is the html:
<div class="wave1div">
<div id="waveBlue1"></div>
<img class="wave1" src="img/loadingwave.png" alt="leftwave">
</div>
<div class="whoIAm">
<h1>WHO I AM</h1>
</div>
<div id="waveBlue2"></div>
<div class="wave2div">
<img class="wave2" src="img/loadingwave.png" alt="rightwave">
</div>
</div>
<!-- Waves end -->
and here is how I styled it:
.waveHeader {
text-align: center;
}
.wave1div, .wave2div, .whoIAm {
display: inline-block;
}
.wave1div, .wave2div, #waveBlue2 {
position: absolute;
top: 270px;
}
.wave1, .wave2{
width: 200px;
position: absolute;
display: block !important;
}
#waveBlue2, #waveBlue1 {
height: 43px;
background: $blue;
position: absolute;
display: inline-block;
text-align: center;
}
#waveBlue1 {
width: 0px;
max-width: 198px;
right:15px;
bottom:-43px;
margin-left: -50px;
}
#waveBlue2 {
max-width: 200px;
}
.prog-bar1, .wave1 {
left: -213px;
}
I apologize if any of that is poorly coded. Like I said, I am very new to learning and appreciate the help.
I would delete the "waves" divs and just leave the heading, like this:
<section class="about">
<h1>WHO I AM</h1>
</section>
Then add the waves as a background for the :before and :after pseudo elements on the heading itself.
.about h1:before, .about h1:after {
content:'';
width:200px;
height:44px;
display:inline-block;
background:url('img/loadingwave.png') no-repeat;
background-color:#86c3c1;
background-size:200px 44px;
}
.about h1:before {
margin-right:30px;
}
.about h1:after {
margin-left:30px;
}
Pseudo elements are very cool and you can do a lot of effects with them. Have a read:
Learning To Use The :before And :after Pseudo-Elements In CSS
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
Another way that you can do this is by putting the content of your heading inside a span, like this:
<h1><span>WHO I AM</span></h1>
Then you can set the background of the span to white and have the waves as the background for the h1 element:
.about span {
background:#FFF;
}
.about h1 {
background:url('files/wave-orig.png') center repeat-x;
background-color:#86c3c1;
background-size:200px 44px;
}
You have to fix up a lot of your markup if you decide to go the span way though - make your headings block level elements, declare proper heights, adjust your container's width etc.
I'm just telling you about this as another option, but the pseudo element way would be the easiest to implement with your current layout.
By the way, I also noticed that you are using margin-bottom:rhythm on a fair amount of your elements - that's not valid CSS and it doesn't do anything.
Here is a link of what I currently have for my skeleton design.
I'm new to using divs, I always used table but moving towards divs.
But anyways, my question would be...How do I align my content of each div properly.
I want the navigation to be centered along with the main content.
Index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Chomas Tool</title>
<meta charset="windows-1252">
<meta name="Keywords" content="chomas,tool,pinconning,michigan,machine,shop" />
<meta name="Description" content="Chomas Tools- description" />
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="images/logo.gif" width="270" height="100" alt="Chomas Tool"></div>
</div><!-- Close header-->
<div id="navbox">Home | About | Projects | Contact</div>
<div id="content">TEST</div>
<div id="footer">Copyright © Chomas Tool</div>
</div><!--Close_wrapper-->
</body>
Main.css
body {
background-color:#b0c4de;
}
p {
background-color:#e0ffff;
}
#wrapper {
height: 100%;
width: 900px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
background-color:grey;
height: 100px;
width: 100%;
}
#logo {
height: 400px;
width: 300px;
float: left;
}
#search {
width: 350px;
height: 400px;
float: right;
}
#search table {
border: 0px solid #000;
padding: 0px;
}
#navbox {
background-color:darkgrey;
width: 100%;
height: 20px;
text-align:center
}
#content {
background-color:lightgrey;
width: 100%;
height: 150px;
}
#footer {
background-color:grey;
width: 100%;
height: 20px;
}
The reason you are getting strange results with that layout is that your #logo div is set to a height of 400px. That is pushing everything else over to the right.
If you remove the height: 400px on the #logo div, and then add this to your styles:
img {vertical-align: bottom;}
everything will appear as you'd expect.
There are a few issues with your code.
The reason your Nav div, Content div and Footer divs are aligning improperly is because you have your #logo div set to a 400px height and floated, but you aren't clearing your float. Unfortunately you can't properly clear that div because you have a height on header of 100px, which is less than your 400px div that is nested inside the header.
For the purpose of teaching you, I'll assume your logo should NOT be 400px high, so I'll set it to be equal to the header height of 100px.
#logo {
height: 100px;
width: 300px;
float: left;
}
While we are on the concept of height, it's acceptable to have a fixed height on your header, as it's a div that shouldn't be super tall or allowed to change (generally speaking there are exceptions). That said... Your content div really shouldn't have a height, I can see you did it here to simulate that you had more content, instead let's just add some content there.
So now we are here: http://jsfiddle.net/dkCZ6/
As you can see the navigation is centered nicely, your content is where it should be as well as the footer.
Let's center the footer to make it nice looking... I added text-align: center;
http://jsfiddle.net/dkCZ6/1/
#footer {
background-color:grey;
width: 100%;
height: 20px;
text-align: center;
}
Noticed that white space that was created between the nav and content area? That's from adding the paragraph around the content stuff. Let's reset all padding and margin by adding * { margin: 0; padding: 0; } to the top of our CSS. (you should use a proper Reset CSS Stylesheet or use a Normalize CSS Sheet. These reset stylesheets help standardize elements across the different browsers, and also gives you a blank slate from which to develope from, without having to worry about weird things occuring, like that white space that we fixed.
Here is the best answer I have:
text-align: center
But base on that code you have then I have done:
**margin: 0 auto**
http://jsfiddle.net/Riskbreaker/WASEH/5/
Just to chow you I did this only on the nav:
Added:
<div class="inner">Home | About | Projects | Contact</div>
and on CSS:
.inner {margin: 0 auto; width: 50%;}
Classes are always good to use when you want to do multiple calls of the same to minimize code. Get in the habit of doing classes.
Lastly I suggest learning HTML5...Divs are great but you can simplified your code with html5
..
..Its simple to learn :)
Add
<div style="clear:both;"></div>
after you close the header
Your image style is all wrong hence why everything will look in the wrong position.
You should also be aware that you can use
margin: 0 auto;
Rather than
margin-right: auto;
margin-left: auto;
Consider using list elements for your navigation rather than just static text.
Here's my situation: I have a changing image of various sizes (always different) being brought into an area of our splash. I posted a question about this a few days ago and employed the solutions that someone suggested. However, there were other issues that I also had to deal with I am back with an updated page that fixes other problems but I now need to see how to vertically center an image within this new code
First, here's the page: http://americanart.si.edu/index_newsplash3m.cfm
It's the middle image for our blog under the slider. Here's the code and css:
Code:
<div class="middle">
<div class="middleimage">
<img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image" /><br />
</div>
<div id="middletext">
<p>
<i>The Dying Tecumseh</i> by Ferdinand Pettrich has returned to the second floor galleries at American Art after his extended stay with the National Portrait Gallery for the exhibition, <i>1812: A Nation Emerges</i>. Visit his new spot among the ...
</i>
<span class="red">Read more...</span> </p>
</div>
</div>
And here is the CSS:
.middle {
float: left;
width: 30.5%;
margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
background: url(/#res/img/americanart_blog_test.jpg) no-repeat #fff;
padding-top: 31px;
text-align: center;
position: relative;
}
div.middleimage { height: 207px;
}
div#middletext {margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
}
div.middle img#middleimg { max-height: 207px;
max-width: 291px;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align: middle;
position: relative;
}
I had to create some new nested divs around the image and text in order to keep the text from going into the image area when the image was of small height.
Thanks.
For div.middleimage add this css rule:
display:table;
Then wrap a div around your actual img tag like this:
<div id="imagewrap"><img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image"></div>
And add this rule to your css:
#imagewrap {
display:table-cell;
vertical-align:middle;
}
You can also do this without any tables, simply add line-height: 207px; to your middleimage class and that should center the image inside.
div.middleimage {
line-height: 207px;
}
Centering things vertically in CSS is next to impossible, as far as I know. There's an article I've been meaning to read that may help you: http://designshack.net/articles/css/how-to-center-anything-with-css/
A novice coder here. I've been trying to implement a sticky footer onto my site, but it's simply not working. Basically, it is an image, with some text positioned absolutely on it. Here's my site: http://mc-airlines.hostei.com
As you can see, it's definitely not working!
I'm using this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ to do it. Here's the code relevant to the footer on my site:
* {
margin: 0;
}
body, html {
text-align:center;
border-width: 0px;
margin:0;
padding:0;
height:100%;
}
#container{
position:relative;
margin: 0 auto -175px;
width:960px;
min-height:100%;
height: auto !important;
text-align:left;
}
#footer{
margin: 0 auto;
text-align:left;
width:960px;
height:175px;
}
#links {
font-family: 'HelveticaNeueRegular', Trebuchet MS, Verdana, sans-serif;
color:white;
font-size: 18px;
padding: 10px;
position: absolute;
bottom: 23px;
left: 0;
width: 300px;
}
#links2{
font-family: 'HelveticaNeueRegular', Trebuchet MS, Verdana, sans-serif;
color:white;
font-size: 18px;
padding: 10px;
position: absolute;
bottom: 10px;
left: 310px;
width: 420px;
}
And my html:
<div id="container">
<!-- (site content -->
<div class="push"></div>
</div>
<div id="footer">
<img src="images/footer.png" alt="footer" class="foot"/>
<div id="links">
<script type="text/javascript">copyright=new Date();
update=copyright.getFullYear();
document.write("© "+ update + " MC Airlines");</script><br>
<span class="psmall">
All content on this site belongs to MC Airlines and its subsidiaries, and may not be used without prior permission from Mr MC. Just kidding, he probably won't reply - just don't abuse it too much :) </span>
</div>
<div id="links2">
Other Links <br>
<span class="psmall">
Our Partners<br>
MC Airlines Thread<br>
MC Airlines Wiki<br>
Cyber Airlines<br></span>
<span class="pxsmall">
We can not be held responsible for the content on external sites. I mean c'mon, that's just unfair.
</span>
</div>
<!-- #footer close -->
</div>
If anyone can point out what I'm doing wrong I'd be very grateful.
Thanks!
Your sticky footer is not working because you are using position:absolute to layout your page and the footer does not know where to position itself in your document. A quick fix would be to position your footer absolutely as well, e.g.
#footer {
left: 50%;
margin: 0 auto 0 -480px;
position: absolute;
top: 1400px;
}
But what i would actually recommend is to position your divs correctly and use floats instead of position:absolute, this will fix all problems that will arise from using such a layout and will be semantically correct.
Quick hint...I am not able to see this code in your source HTML
<div class="push"></div>
This is important cause it helps to stick the footer to the bottom of the page
Your posted code does not match the site you linked to. My comments are based upon your link, not the code you posted here.
Move the footer outside the #container div.
Add the .push div to the bottom of the #container div (where the footer is now)
add the css rules for #footer and .push to clear: both;
There's an easier way to do sticky footers that takes a little less code and is more clear on how it works. Take a look at the tutorial at http://www.htmltutorialsandtips.com/css-sticky-footer to see how it works. It will take you through it step by step so you understand how sticky footers work and can then modify your code accordingly. That way you'll be able to apply the concept to any layout instead of just having an answer for this one question.
I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/
I put a red border around it to try to see where my #right is on my page. I have tried working with:
height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.
Any ideas how I can get my sidebar to extend with the background-color to fit the length?
You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/
You can achieve this with a faux sidebar:
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
With this css:
.sidebar_back {
top: 0;
left: 0;
bottom: 0;
z-index: -1;
width: 200px;
background: #444; // the color you want the sidebar to be
position: absolute;
}
.sidebar {
float: left;
width: 180px;
padding: 10px;
}
The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example:
http://codepen.io/poopsplat/full/jquBv
You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.
You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.
The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.
There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.
I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15%; /* this has to be fixed-size so you can account
for it in the next bit; but can still be kinda
fluid-ish... */
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 83%; /* 100 - (15% + 2% (for a gutter)) */
margin-left: 1%;
margin-right: 16%; /* less than 100 - 83, to allow for rounding of % or px */
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
...
<body>
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
</body>
It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)
Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.
(Okay, I lied: I clearly have tried it now...)
Here is the way I have found to solve this issue:
You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.
First, add and style the elements in your stylesheet:
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
Then, simply set up your web page like this:
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!
I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
$('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});
It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)