Help with borders

@WarbladeDec 20.2008

Hi guys,

Borders seem to be a fairly simple thing, right? We that’s a what I thought until I tried getting a border to span the ~~[I]~~length[/I] of a page! My site is setup with WordPress and has two “sidebars”. I have each sidebar with a border on the right or left to the main column of content. For the life of me I can’t seem to get the borders to continue to the bottom of the page. Can someone help me out? Thanks for your help guys (and gals)!

~~[url]~~http://kwcycling.chrisdire.com[/url]

to post a comment

CSS

11 Comments(s) _↴

@chrisdaman77Dec 21.2008 — #Just a guess and nothing more, but looking at your source it could have something to do with the amount of <li></li> you have on either side. I hope I am explaining this ok. For example you have 7 in your left column and only 5 in your right column. The border is only going to run the length of the div it is associated with. Now I have played with it a little and it may not be the proper way but it did extend the borders so that they are even. Here is the edited version of the source code. I do not suggest using this right off until you validate that my adjustments are correct.

[CODE]<!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" dir="ltr" lang="en-US">
 
 <head profile="http://gmpg.org/xfn/11">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 <title>Kenny Williams Racing   &raquo; Home</title>
 
 <link rel="stylesheet" href="http://kwcycling.chrisdire.com/wp-content/themes/default/style.css" type="text/css" media="screen" />
 <link rel="alternate" type="application/rss+xml" title="Kenny Williams Racing RSS Feed" href="http://kwcycling.chrisdire.com/feed/" />
 <link rel="pingback" href="http://kwcycling.chrisdire.com/xmlrpc.php" />
 
 <style type="text/css" media="screen">
 
  #page { background: url("http://kwcycling.chrisdire.com/wp-content/themes/default/images/kwcycling_bgwide.jpg") repeat-y top; border: none; }
 
 </style>
 
 <meta name='NextGEN' content='0.99.1' />
 
 <style type="text/css" media="screen">@import "http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/css/nggallery.css";</style>
 <script type="text/javascript"> var tb_pathToImage = "http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/thickbox/";</script>
 <style type="text/css" media="screen">@import "http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/thickbox/thickbox.css";</style>
 <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://kwcycling.chrisdire.com/xmlrpc.php?rsd" />
 <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://kwcycling.chrisdire.com/wp-includes/wlwmanifest.xml" /> 
 <script type='text/javascript' src='http://kwcycling.chrisdire.com/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>
 <script type='text/javascript' src='http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/thickbox/thickbox-pack.js?ver=3.1.1'></script>
 <script type='text/javascript' src='http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/admin/js/swfobject.js?ver=2.1'></script>
 <meta name="generator" content="WordPress 2.6.5" />
 
 </head>
 <body>
 <div id="page">
 
 
 <div id="header">
 <div id="headerimg">
 </div>
 </div>
 <hr />
 
 <div class="sidebarborder">
 <div id="sidebar_left">
 <div class="sidebar">
 
   <div id="leftimg"></div>
 
   <ul style="width: 100&#37;; height: 100%;">
 
 
   <!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
   <li><h2>Author</h2>
   <p>A little something about you, the author. Nothing lengthy, just an overview.</p>
   </li>
   -->
 
 
   <div id="links"><li class="pagenav"><h2></h2><ul><li class="page_item page-item-9 current_page_item"><a href="http://kwcycling.chrisdire.com" title="Home">Home</a></li>
 <li class="page_item page-item-3"><a href="http://kwcycling.chrisdire.com/coaching/" title="Coaching">Coaching</a></li>
 <li class="page_item page-item-5"><a href="http://kwcycling.chrisdire.com/bike-fitting/" title="Bike Fitting">Bike Fitting</a></li>
 <li class="page_item page-item-2"><a href="http://kwcycling.chrisdire.com/about/" title="About">About</a></li>
 
 <li class="page_item page-item-6"><a href="http://kwcycling.chrisdire.com/testamonials/" title="Testamonials">Testamonials</a></li>
 <li class="page_item page-item-67"><a href="http://kwcycling.chrisdire.com/pictures/" title="Pictures">Pictures</a></li>
 <li class="page_item page-item-28"><a href="http://kwcycling.chrisdire.com/kennys-blog/" title="Kenny&#8217;s Blog">Kenny&#8217;s Blog</a></li>
 <li class="page_item page-item-7"><a href="http://kwcycling.chrisdire.com/contact/" title="Contact">Contact</a></li>
 </ul></li></div>
 
 
 
   <li>
   <form method="get" id="searchform" action="http://kwcycling.chrisdire.com/">
 <label class="hidden" for="s">Search for:</label>
 
 <div><input type="text" value="" name="s" id="s" />
 <input type="submit" id="searchsubmit" value="Search" />
 </div>
 </form>
 </li>
 
   </ul>
   </div>
  </div>
 </div>
 
  <div id="content" class="narrowcolumn">
 
   <div class="post" id="post-9">
   <!-- <h2>Home</h2> -->
   <div class="entry">
   <h2><em>Welcome</em></h2>
 <p><span class="text71Font1">You have reached the answer to your cycling goals. I can help you become the racer or cyclist you want to be. Kenny Williams Racing offers   affordable coaching, testing, and a fit that will not only improve your pedal stroke, but allow you to enjoy your time in the saddle.</span></p>
 <p><span class="text71Font1"> </span></p>
 <p><span class="text71Font1">-Kenny Williams</span></p>
 
 
   </div>
   </div>
 
  </div>
 
 <div class="sidebarborder">
 <div id="sidebar">
 <div class="sidebar">
 <ul>
 
 
 <li><a href="http://www.rocket7.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/rocket7.gif" width="140" height="52" alt="Rocket 7 Cycling Shoes" /></a></li>
 <li><a href="http://www.1ratemtg.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/1st_rate_mortgage.gif" width="140" height="55" alt="First Rate Mortgage" /></a></li>
 
 <li><a href="http://www.northwestvelo.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/pazzovelo.gif" width="140" height="74" alt="First Rate Mortgage Cycling Team" /></a></li>
 <li><a href="http://www.clubzum.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/zum.gif" width="140" height="74" alt="Club Zum" /></a></li>
 <li><a href="http://www.smithoptics.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/smith.gif" width="140" height="55" alt="Smith Optics" /></a></li>
 [COLOR="Navy"]<li>&nbsp;</li>
 <br />[/COLOR]
 </ul>
 </div>
 </div>
 
 </div>
 
 <hr />
 <div id="footer">
 
 <p>
 </p>
 
 </div>
 </div>
 
 <!-- Gorgeous design by Chris Di Re - http://www.chrisdire.com/ -->
 
 
   </body>
 </html>
 [/CODE]

What is in blue is what I added. Hope this helps out.

Chris

@WarbladeauthorDec 21.2008 — #Thanks much. That seemed to help a little bit, however I'd still like the borders/lines to span 100% of the page no matter how much content is on the page. Does anyone have any ideas on how I can do this? Maybe someone has a better way of getting this to be done?

@chrisdaman77Dec 21.2008 — #I guess I may have misunderstood what you wanted done. I figured you wanted the 2 inner vertical borders to be a lined up together. When you say to the bottom of the page are you speaking about to the horizontal border?

@WarbladeauthorDec 21.2008 — #Sorry, I guess I should have tried to be a little bit more clearer. Chris, yes that is exactly what I'm trying to get done. Because the "footer" is an image the vertical borders will stop a little bit before the horizontal line at the bottom. Do you have any ideas on how to make those vertical borders span the length of the page 100% of the time? Thanks again.

@chrisdaman77Dec 21.2008 — #Let me play with it a bit and I will get back to you. I have an idea but will need to try some things to be sure it will work.

@WarbladeauthorDec 21.2008 — #Thank you. I thought about putting the borders on the content column but there are some pages where the content doesn't stretch past the two sidebars. So then I was contemplating an expandable div on each of the sidebars so it would always expand down to the footer, but I'm not 100% sure as how to implement it. Maybe there's a way to set the padding or margin for the bottom of each sidebar to expand accordingly? Let me know what you come up with, I'm rather interested to know. This problem has me perplexed!

@chrisdaman77Dec 21.2008 — #I know the feeling about troublesome problems. If you did these in CSS can you post the file so I can dig a little further?

@WarbladeauthorDec 21.2008 — #Here you go, it's attached at it's quite big.

@chrisdaman77Dec 21.2008 — #Ok here is what I have done but not tested. I added a height setting to the sidebar and sidebar_left sections. They are marked in red in the event it does not work. I couldn't test it because the computer that houses Dreamweaver is down for a bit so I am hoping this small change will help. If not please let me know because there are other things I can do once Dreamweaver is back up.

@WarbladeauthorDec 21.2008 — #I've actually already tried doing this (several times, in fact) and it seems to do absolutely nothing. Very frustrating. Thanks for your input again.

@WarbladeauthorDec 22.2008 — #Does anyone have any ideas?

Also in #CSS _↴

Same browser - same code - Why the difference.Issues with column length floating a menu

Success!

Help @Warblade spread the word by sharing this article on Twitter...

Tweet This

Help with borders

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Help with borders

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴