WeLoveCSS (http://welovecss.com/index.php)
-   CSS (http://welovecss.com/forumdisplay.php?f=5)
-   -   [SOLVED] Two divs with the same height (http://welovecss.com/showthread.php?t=5024)

jdarias 30th June 10 03:28 AM

Two divs with the same height
Im 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 im 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 ive tried:
set the sidebar with
height: auto;
none of them worked, the sidebars height remained the same as the list it contains.

meesa 30th June 10 04:47 AM

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.

Rayzur 30th June 10 07:11 AM

Re: Two divs with the same height

I have posted several examples of how to make equal height columns with CSS this thread.

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.


#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.

jdarias 30th June 10 06:01 PM

Re: Two divs with the same height
Thank you guys. Sorry for not using the search feature.
Got it sorted with faux columns :)
Ill stick around here often from now on, since im making web design my source of income, and im just starting.

All times are GMT. The time now is 11:02 AM.

Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.