miocene Posted August 1, 2009 Share Posted August 1, 2009 Please check my site hereI have a div as the right column to show extra stuff on my site.Currently it is set to float:right and min-height-700px.However if the main content div is higher than 700px than the right column div does not stretch the fill it and I am left with a bit of blank space beneath it.Likewise, if I set the right-column to be more than 700px it pokes out beneath the footer and does not cause the content div to lengthen with it.How do I get it to always be the same height as the content div that contains it. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 1, 2009 Share Posted August 1, 2009 the best way to do this is to give the illusion the right side goes down to the bottom, by using a repeating image within the outer div,.1 create two outer/wrapper divs.2 create main content, and right side bar div (with no background coluor or border(see why later).3 create a repeating image that matches the right side bar background with border, and place this in the wrapper div, and position it right, also give this div the background colour(of main body) required.4 add the content vine background image to the inner outer div.i've made a rough example below.<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">*{padding:0;margin:0;}body {margin: 10px; }p { margin-bottom: 0.9em; text-align:justify; }h1, h2, h3, h4, h5, h6 { line-height:1em;}h1 { font-size: 250%;}h2 {font-size: 225%;}h3 {font-size: 200%;}h4 {font-size: 175%;}h5 {font-size: 150%;}h6 {font-size: 125%;}#wrapper { width: 850px; border: 0px solid red; overflow:hidden; background:url(../right-border.png) right top repeat-y #37404B;}#inner { background:url(../contentvine.png) no-repeat; overflow:hidden;}#main_content { float: left; border: 0px dashed lime; width:648px; padding: 8px; }#right{width: 160px; float: right; border: 0px solid #000; margin:8px;}</style></head><div id="wrapper"><div id="inner"><div id="main_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div><div id="right"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div></div></div></body></html>edit: seemed to copy old code over? new code in bold Link to comment Share on other sites More sharing options...
dsonesuk Posted August 2, 2009 Share Posted August 2, 2009 <!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">body {background:#99C5DB url(http://fairshare.x10hosting.com/nearfrog/style/fatlines.gif) repeat fixed center top;color:#CEEBEB;margin:0;padding:0;}p { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px;}h1 {font-family:Arial,Verdana,Helvetica;font-size:0;}h2 {color:#94B3C5;font-family:Georgia,serif;font-size:24px;}h3 {color:#DAA31F;font-family:Trebuchet MS;font-size:13px;font-weight:bold;margin-top:32px;padding-left:0;text-transform:uppercase;}#header {background:#46505B url(http://fairshare.x10hosting.com/nearfrog/style/banner2.png) no-repeat scroll left center;border-bottom:1px dashed #858899;height:110px;margin:0;padding:0;}#navlist {background-color:#46505B;border-bottom:2px solid #DAA31F;height:35px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;width:100%;}#navlist li {display:inline-block;font-family:helvetica,arial,sans-serif;font-size:19px;height:30px;margin:0;padding:6px;}#navlist a {border-style:none;color:#858899;display:block;height:30px;margin:0;padding:0 0 0 8px;width:100%;}#rightlist {float:right;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;margin-right:0;min-height:740px;padding-bottom:20px;padding-left:20px;width:150px;}#rlist {line-height:21px;list-style-image:none;list-style-position:outside;list-style-type:none;}#wrapper {margin: 0 auto; width: 850px; border: 0px solid red; overflow:hidden; background:url(../right-border.png) right top repeat-y #37404B;}#inner { background:url(../contentvine.png) no-repeat 30px 160px; overflow:hidden;}#content { float: left; border: 0px dashed lime; width:640px; margin: 0 18px; line-height:21px; }#leftshad {background:transparent url(http://fairshare.x10hosting.com/nearfrog/style/leftshad.png) repeat-y scroll left top;margin: 0 auto;width:868px;position:relative;top: 10px;}#rightshad {background:transparent url(http://fairshare.x10hosting.com/nearfrog/style/rightshad.png) repeat-y scroll right top;margin: 0 auto;width:868px;}a {border-bottom:1px dashed #3DA09B;border-color:#3DA09B;border-width:1px;color:#3DA09B;text-decoration:none;}img {border:1px dashed #CEEBEB;padding:3px;}#topban {background:transparent url(http://fairshare.x10hosting.com/nearfrog/style/topban.gif) repeat-x fixed left top;float:left;height:10px;left:0;position:absolute;top:0;width:100%;}#footer {background-color:#46505B;border-top:2px solid #DAA31F;bottom:0;height:16px;margin-left:auto;margin-right:auto;padding:0;position:relative;text-align:center;width:850px;}#footer p {font-size:8px;margin:0;padding:0;}</style></head><body><div id="topban"></div><div id="leftshad"> <div id="rightshad"><div id="wrapper"><div id="inner"><div id="container"> <div id="header"> <h1>NearFrog</h1> </div> <ul id="navlist"> <li><a style="color: rgb(255, 255, 255);" href="index.php">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="portfolio.php">Portfolio</a></li> <li><a href="services.php">Services</a></li> <li><a href="contact.php">Contact</a></li> </ul> </div><div id="content"><h2>Welcome</h2> <h3>Introduction</h3> <p>Welcome to NearFrog Designs</p> <p>We are a small, independent web design company based in Wiltshire, UK. We provide excellent quality web sites for a great price! Our sites are usually simple and easy to maintain whilst being striking and visually appealing.</p> <p>All designs are catered to the client's requirements and are unique.</p> <hr /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div> <div id="rightlist"> <h2>Bits & Bobs</h2> <ul id="rlist"> <li><a href="#">Try Here</a></li> <li><a href="#">Or here</a></li> <li><a href="#">Or Here??</a></li> </ul> <h2>Picture</h2> <img src="http://fairshare.x10hosting.com/nearfrog/includes/woodchester.jpg" alt="picture"/> </div></div></div><div id="footer"> <p>Copyright © 2009 - NearFrog Designs</p></div></div></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.