I want to push div content to the bottom of my container div. I have a container which has two divs, right and left. These two divs will grow depending on content. Which works fine. But here is the thing. When the left div grows, the right also grows, which is also fine BUT I want the content of the right div to always be at the bottom of that right div not floating around in the middle of the div when the left div grows. Hope everyone is catching my drift? Here is some code for the divs.
body{
width:100%;
background:#000;
height:100%
}
/*boxes*/
#sitewrapper{
position:absolute;
top:0;left:0;
z-index:70;
overflow:auto;
width: 100%;
height: 100%;
}
#wrapper{
margin: 0 auto;
width: 795px;
padding-top: 50px;
}
#content{
clear: both;
background: repeat url(../images/backslice.png);
overflow: hidden;
min-height: 500px;
}
#quote{
width: 542px;
height: 88px;
padding-left: 230px;
padding-top: 35px;
padding-bottom: 20px;
}
#left{
float: left;
width: 550px;
padding-top: 30px;
padding-left: 30px;
display: inline;
}
#right{
margin-left: 575px;
padding-top: 100px;
padding-left: 25px;
position: relative;
}
#adres{
display: block;
width: 100%;
position: absolute;
bottom: 10px;
top: 10px;
border: 1px solid #fff;
}
<div id="sitewrapper">
<div id="wrapper">
<div id="navigationcontainer">
<div id="navigation">
<ul>
<li><a href="index.html" class="wieactive">Wie</a></li>
<li><a href="html/locaties.html" class="locatie">Locaties</a></li>
<li><a href="html/menu.html" class="menu">Menus</a></li>
<li><a href="html/events.html" class="event">Events</a></li>
<li><a href="html/contact.html" class="contact">Contact</a></li>
</ul>
</div>
<div id="logo">
<img class="logo" src="images/logo.png"/>
</div>
</div>
<div id="content">
<div id="quote">
<img src="images/quote.png"/>
</div>
<div id="links">
</div>
<div id="rechts">
<div id="adres">
<img src="images/passionlogo.png" alt="passion"/>
<ul class="adres">
<li>Lange Molenstraat 2/1</li>
<li>B- 9280 Lebbeke</li>
<li>+32(0)2 258 14 76</li>
<li>info@passion4dining.be</li>
<li>REK.NR.: 751-2042107-06</li>
</ul>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</div>