1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Rep Power

    Anyone know how to get sidebars to resize automatically?

    Hello, so basically I've got these side bar graphic things I want to put on the edges of my main content table to make it look nice. The problem is I can't seem to figure out how to make them resize their height automatically depending on the length of the main content table, which is slightly different on every page.

    Since URLs are blocked I guess I have no choice but to just include the code here, ugh.

    <div id="page-container">
    <div id="headerer">
    	<div id="header">
        <div id="navpanel">
    		<img src="images/interface/gorglogowidth.jpg" width="270" height="269" border="0" /><br />
            <div id="tvbg">
            <div id="main-nav">
    		<dt id="news"><a href="index.php">news</a></dt>
    		<dt id="episodes"><a href="episodes.html">episodes</a></dt>
    		<dt id="universialinfo"><a href="universialinfo.html">universialinfo</a></dt>
    		<dt id="music"><a href="music.html">music</a></dt>
    		<dt id="contact"><a href="contact.html">contact</a></dt>
    	<div id="sidebar-b">
    		<img src="images/interface/panelright.jpg" width="17" border="0" />
            <img src="images/interface/bottomrightcorner.jpg" />		
    <div id="sidebar-a">
          	<img src="images/interface/panelleft.jpg" />
            <img src="images/interface/bottomleftcorner.jpg" width="28"/>		
    <div id="content">
    	  <span class="titletext">Episode 1: The Greatest Planet in Existence</span><br />
    		<a href="episodes/episode1high.html" target="_blank">High Quality (595MB)</a>
    		<br />
    		<a href="episodes/episode1low.html" target="_blank">Low Quality (85MB)</a>
    		<br /><br />
    		<span class="titletext">Episode 2: Savory Dark Truffle</span><br />
    		<a href="episodes/episode2high.html" target="_blank">High Quality (597MB)</a>
    		<br />
    		<a href="episodes/episode2medium.html" target="_blank">Medium Quality (264MB)</a>
    		<br />
    		<br />
    		<span class="titletext">Episode 3: Spoon the Pretty Bad</span><br />
    		<a href="episodes/episode3medium.html" target="_blank">Medium Quality (146MB)</a>
    		<br />
    		<a href="episodes/episode3flashhigh.html" target="_blank">High Quality FLASH FORMAT(Recomended)</a>
         <div id="panelbottom">
            <img src="images/interface/bottommiddle.jpg" width="300" height="28" />    </div>
    Anyway, the two images, "panel left", and "panel right" (contained in the DIVs "sidebar-a" and "sidebar-b", respectively) go wayyy down, as their native resolution is very large and I was initially hoping to simply be able to scale them down to to match the height of the main content page

    The CSS file is as follows:

    #page-container {
    	width: 800px;
    	margin: auto;
    	text-align: left;
    /* Main Navigation */
    #tvbg {
    #main-nav { 
    	padding-top: 50px;
    	margin-left: 32px;
    	height: 356px;
    	width: 150px;
    #header {
    	height: 188px;
    	background: #696969
    		width: 530px;
    		float: right;
    #sidebar-a {
    	float: left;
    	width: 28px;
    #sidebar-b {
    	float: right;
    	margin-left: 155px;
    	width: 17px;
    #navpanel {
    	float: left;
    #content {
    	margin-right: 17px;
    	margin-left: 268px;
    	line-height: 18px;
    	background: #696969;
    #content .padding {
    	padding: 25px;
    Last edited by rahfulkoptar; February 8th, 2008 at 04:41 AM. Reason: Removed code unrelated to question
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Rep Power
    See faux columns.


    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo