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.
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:
> I have achieved part of the look, but still having problems.  
> 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

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

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --

Previous Message
Next Message

Message thread: