Previous Message
Next Message

Positioning 2 column layout

Sent by Rob Cochrane on 16 September 2005 17:05


This is a multi-part message in MIME format.
--------------000909010807080902040201
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit

Shawn Ferguson wrote:
> However, now I'm having another problem.  I want to create a 2 column layout similar to this:
> http://www.ccac.edu/default.aspx?id=139163
>  
> I have achieved part of the look, but still having problems.  
> http://cscc.edu/test/template.asp
>  
> The part I am having problems with is making the side bar go all the way down regardless of the
height of the content area.  It seems to create a "box" effect.  Don't worry about the list styles,
font, etc, I'm just trying to get the sidebar correct.  Any clues?
>  
> Shawn
> 

Hello Shawn,

To force a column aka Div to stretch to the bottom of the page without 
content irrespective of the adjacent columns content can be done by 
giving it a hight of 100%. This is providing you dont contain it within 
some other container.

The normal practice in CSS is to fool the masses into believing it is a 
full height column by containing both your left and right columns in a 
wrapper div. Then in the wrapper div set a nice small graphic that is 
the width of your column as background and let it repeat -y position 
left. You can make the graphic any height that will transmit the info 
you want. Set the wrapper to 100% high and then your content can grow or 
shrink and it all looks great.
When I was learning (still am but have got a little knowledge... 
dangerous!!) I used a number of templates that I found on the web. 
Downloaded them and pulled them apart. I often put borders all around 
every div with gaudy colours to see the relationships. This is sometimes 
difficult when some of the real masters let rip with coding a complex 
style sheet.
All the best
Rob

--------------000909010807080902040201
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

--------------000909010807080902040201--
Previous Message
Next Message

Message thread: