Hi guys ok so how do i get the left gray panel to stretch down to the bottom to fit the rest of the page without having to use loads of <br /> tags?<br /><br />Site is here <!-- m --><a class="postlink" href="http://www.phpbbhosts.co.uk">http://www.phpbbhosts.co.uk</a><!-- m --><!--content-->
Well Heres what I did: <!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->page_leftbar {<br />~~~~~~~~height:900px;~~~~~~~~~~~~<br />border-right:2px solid #D1D1D1;<br />float:left;<br />margin-left:-100%;<br />width:200px;<br />}<!--c2--></div><!--ec2--><br /><br />And heres what It looked like:Click to view attachment<!--content-->
can't seem to get that to work<!--content-->
hmm.... is there such thing as height:100% ?? does anyone else know?<!--content-->
i got it working but had to add more pixels as other pages are longer i did try 100% it seemed to work for a couple of pages but not all<br /><br />The prob is target="_blank">http://www.xs4all.nl/~peterned/examples/csslayout1.html<!--content-->
Not tried that although it does not make a lot of sense to me<!--content-->
wow im stumped... i hope someone else can answer it cause I really wont to no how to do this. Maybe PM Ben or Eskymo<!--content-->
Ye well thanks for your help anyway <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid="
" border="0" alt="wink.gif" /><!--content-->
Instead of having:<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->background: #f3f3f3;<br /><br />Â Â Â Â border-right:2px solid #d1d1d1;<!--c2--></div><!--ec2--><br /><br />in the page_leftbar div. Make the grey bg and border into a 1 pixel high graphic and add the following to #contentcolumn:<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->background:url(nameofgraphic.gif) top left repeat-y;<!--c2--></div><!--ec2--><br /><br />although as you have your margin-left set target="_blank">Faux Columns<!--content-->
thats a good idea, but wouldnt there be a simpler way to do it?? or is that the style="vertical-align:middle" emoid="" border="0" alt="smile.gif" /><!--content-->
That's the way you do it! I've never knkown another way.<br /><br />if the background has to represent the left column, then you would put it 'top left'. Why would you think of putting it 'top right' ?<!--content-->
Ok nvr mind I got a little confused there, thanks for the explanation. The I have always done it is:<br /><br />HTML<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><div id="left">yada yada yada</div><br /><div id="Center">afasfsdaf</div><!--c2--></div><!--ec2--><br /><br />CSS<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#left {<br />height:600px;<br />}<br />#center {<br />height:600px;<!--c2--></div><!--ec2--><br /><br />And they line up fine and the border runs the whole length too.<!--content-->
The problem with that method ^ is that you run into problems if your page is more than 600px in height. The way Eskymo mentioned is far better and will work style="vertical-align:middle" emoid="" border="0" alt="smile.gif" /><!--content-->
Well Heres what I did: <!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->page_leftbar {<br />~~~~~~~~height:900px;~~~~~~~~~~~~<br />border-right:2px solid #D1D1D1;<br />float:left;<br />margin-left:-100%;<br />width:200px;<br />}<!--c2--></div><!--ec2--><br /><br />And heres what It looked like:Click to view attachment<!--content-->
can't seem to get that to work<!--content-->
hmm.... is there such thing as height:100% ?? does anyone else know?<!--content-->
i got it working but had to add more pixels as other pages are longer i did try 100% it seemed to work for a couple of pages but not all<br /><br />The prob is target="_blank">http://www.xs4all.nl/~peterned/examples/csslayout1.html<!--content-->
Not tried that although it does not make a lot of sense to me<!--content-->
wow im stumped... i hope someone else can answer it cause I really wont to no how to do this. Maybe PM Ben or Eskymo<!--content-->
Ye well thanks for your help anyway <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid="
" border="0" alt="wink.gif" /><!--content-->Instead of having:<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->background: #f3f3f3;<br /><br />Â Â Â Â border-right:2px solid #d1d1d1;<!--c2--></div><!--ec2--><br /><br />in the page_leftbar div. Make the grey bg and border into a 1 pixel high graphic and add the following to #contentcolumn:<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->background:url(nameofgraphic.gif) top left repeat-y;<!--c2--></div><!--ec2--><br /><br />although as you have your margin-left set target="_blank">Faux Columns<!--content-->
thats a good idea, but wouldnt there be a simpler way to do it?? or is that the style="vertical-align:middle" emoid="
" border="0" alt="smile.gif" /><!--content-->That's the way you do it! I've never knkown another way.<br /><br />if the background has to represent the left column, then you would put it 'top left'. Why would you think of putting it 'top right' ?<!--content-->
Ok nvr mind I got a little confused there, thanks for the explanation. The I have always done it is:<br /><br />HTML<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><div id="left">yada yada yada</div><br /><div id="Center">afasfsdaf</div><!--c2--></div><!--ec2--><br /><br />CSS<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#left {<br />height:600px;<br />}<br />#center {<br />height:600px;<!--c2--></div><!--ec2--><br /><br />And they line up fine and the border runs the whole length too.<!--content-->
The problem with that method ^ is that you run into problems if your page is more than 600px in height. The way Eskymo mentioned is far better and will work style="vertical-align:middle" emoid="
" border="0" alt="smile.gif" /><!--content-->