Hello people, I have some problems with right and left blocks on my page. When I put less text in the left block the right block become taller than left one and conversely, when I put more text in the left block right one become smaller than the left one. I wanna float them together so they will have same height. Please see attached picture so you will understand everything.

 

Hope someone can help me. Thanks.

Have a look at this,

 

http://www.alistapart.com/articles/fauxcolumns/

 

If you don't understand it, just write back here and I or someone else will explain it.

 

Regards,

Josh

Thanks Josh, but seems I don't understand something. Now my CSS file looks like this but nothing's changed. Columns are still different. Probably I've put it in wrong place.

 

* {

margin: 0px;

padding: 0px;

}

#wrapper {

width: 775px;

border: 1px solid #000;

background-color: #fff;

margin-right: auto;

margin-left: auto;

}

#wrapper #header {

height: 106px;

}

a img {

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

}

#wrapper #navigation {

height: 25px;

}

#wrapper #bodyArea #left {

float: left;

width: 550px;

background: #ccc url(../images/leftcolumn.jpg) repeat-y;

}

#wrapper #bodyArea #right {

float: right;

width: 225px;

background: #ccc url(../images/rightcolumn.jpg) repeat-y;

}

#wrapper #bodyArea #footer {

clear: both;

height: 20px;

background-color: #CFF;

text-align: center;

}

p {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

color: #333;

margin: 20px;

}

Oh yeh, I've got it. It must be just one image with green colour from the left and brown colour from the right. The width of the image must be same as width of page. In my case is 775px.