WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Two divs with the same height

Reply
  Thread Tools Display Modes
Old 30th June 10, 03:28 AM   #1
jdarias
WLC Member
 
Join Date: Jun 2010
Posts: 8
Default Two divs with the same height

I┤m creating a page with a content and a sidebar. I want both elements to be the same height but with different background color, so if the content area is longer than the sidebar , i want the sidebar background color to occupy the same height as the content.

So what i┤m doing in the html is to create a containing div for both the sidebar and the content, wich are inside their respective div too. The sidebar is floated to the left and the content to the right.

How can I do this?
things i┤ve tried:
set the sidebar with
height: auto;
height:100%;
none of them worked, the sidebar┤s height remained the same as the list it contains.
jdarias is offline   Reply With Quote
Old 30th June 10, 04:47 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: Two divs with the same height

Use Faux Columns.

What you do is you place a background on that DIV that holds both sides. That background image consists of the two colors that you want each to be. Just make the left color the right width, as well as the right color.
__________________
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 30th June 10, 07:11 AM   #3
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: Two divs with the same height

Hi,

I have posted several examples of how to make equal height columns with CSS this thread.
http://welovecss.com/showpost.php?p=20056&postcount=3

Faux Columns are the easiest way to go. You don't necessarily have to color both columns with the image, in fact the image only needs to be as wide as the narrow column.

A background color can be st on the div that wraps up both floated columns. The image would go there as well.

Code:
#floatwrapper {
overflow:hidden; /*contain floats*/
background: #CCC url(images/faux.jpg) repeat-y 0 0;
}
That would give the right column a gray BG color and set the faux image on the left.
__________________
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
Old 30th June 10, 06:01 PM   #4
jdarias
WLC Member
 
Join Date: Jun 2010
Posts: 8
Default Re: Two divs with the same height

Thank you guys. Sorry for not using the search feature.
Got it sorted with faux columns
I┤ll stick around here often from now on, since i┤m making web design my source of income, and i┤m just starting.
jdarias 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 06:46 AM.



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.