WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Best practice for vertical liquid layout??

Reply
  Thread Tools Display Modes
Old 2nd January 10, 04:15 AM   #1
Apostrophe
WLC Member
 
Join Date: Jan 2010
Posts: 1
Default Best practice for vertical liquid layout??

I am going to explain my css layout process and then see if anyone has a better solution or advice on making it better.

Currently I wrap my entire site content inside a div called wrapper. Inside this wrapper I in lnclude the header div, body div and of course all the respected divs that go within.

One of the divs I create is called contentwrapper inside this I include my main content div as well as a right or left column div. What I am wondering is the best way to set heights on those so it extends with the content.

I have used

min-height: ;
height: auto;
height: 100%;

but I want the content wrapper to extend when the child div content wrapper overflows it. What has been happening is the content wrApper div stays the min-height specified but the main content still extends past it until there is no more content. Is there a better way to do this? Am I thinking the correct way?is there away to have the parent div extend with the child div?

Curretly I have a 25px margin on the bottom of the parent div with the intention of pushing down the footer but when the child div extends past the parent div this defeats that purpose.

I have added the margin to the bottom of both child divs but is there an easier way? Can't we just use one div And force everything within that div to grow within and the parent div and have that one div extend?

Thanks so much for your help in advance!

Joe
Apostrophe is offline   Reply With Quote
Old 2nd January 10, 06:03 AM   #2
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: Best practice for vertical liquid layout??

Quote:
I have used

min-height: ;
height: auto;
height: 100%;
Hi, Welcome to WLC!
I'm not quite sure how you have used those rules since you have not posted your code. I am going to guess that you set min-height:? ; on your wrapper then height:auto; on your contentwrapper. You don't really even need to set height auto as it is the same as not even setting a height. I suspect that your problems are coming from height:100%.

When you set height:100% on anything after height:auto; it has nothing to inherit from since min-height is not inherited.

It sounds like you are simply wanting Equal Height Columns, if so then it requires a completely different approach.

When using css for equal columns it is all about making them appear to be equal heights. That will always involve some sort of trickery with css since a table-cell is the only element that will base it's height from another element.

There are about four different ways to do them with css that I know of -
(Just view the page source for the css and html on these examples)

Faux Columns are probably the easiest and it just involves using a repeat-y BG image on the main container to give the columns their color.

The Border Trick is another simple method and it uses a border on the main content div that is the same width of the column. The column is nested within that div then shifted left or right into the border with a negative margin. As the main content expands with content the wide border follows it.

Extra Wrapping Divs can also be used to make equal height columns and once again negative margins are used to shift the sidebars into place. The sidebar colors are actually coming from the extra wrapping divs though.

Absolute Faux Columns is another method that uses an absolute positioned div positioned at the bottom of the wrapper with a 100% height set on it. It layers behind the actual column with a lower z-index and it just supplies the color.
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur 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:25 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.