WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] How do I make these elements extend downwards?

Reply
  Thread Tools Display Modes
Old 26th March 11, 03:44 PM   #1
funkylaundry
WLC Member
 
Join Date: Mar 2011
Posts: 3
Default How do I make these elements extend downwards?

I am in the progress of building the page-layout below. However I cannot find a way to make the dark-brown bar on the right and the red bar on the left extend towards the footer independently of the amount of contents on the page (the 3 blocks in the middle are supposed to hold blog posts and may vary in both length and numbersmeaning that the site height may vary a lot).
How do I solve this?

Watch the site here:
http://amok-adhoc.com/theme_previews/markup_float.html

I also did a diagram to help me structure the markup - the problematic divs are marked with colors:
http://amok-adhoc.com/theme_previews...0diagramme.pdf
funkylaundry is offline   Reply With Quote
Old 26th March 11, 05:55 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: How do I make these elements extend downwards?

Look into faux columns.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 26th March 11, 06:09 PM   #3
funkylaundry
WLC Member
 
Join Date: Mar 2011
Posts: 3
Default Re: How do I make these elements extend downwards?

Seems cool... but I need to read a bit more into it to.

Right now I was trying out an approach using jquery to get the height of the content div which is responsible for the height of the page and then using that to inject a height value into each of the elements.
funkylaundry is offline   Reply With Quote
Old 26th March 11, 07:22 PM   #4
funkylaundry
WLC Member
 
Join Date: Mar 2011
Posts: 3
Default Re: How do I make these elements extend downwards?

The faux trick did an awesome job. I got rid of a lot of container-divs and everything is working great as you can see here:

http://amok-adhoc.com/theme_previews...rkup_faux.html
funkylaundry is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:27 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.