I am trying to make the left column the same height as the right column. When this is accomplished
the right border of the left column should be full length like central column but it only extends
to the word “advanced search” right now. anyone can help me with this one?
http://173.199.158.106/cspro223/index.php?dispatch=categories.view&category_id=87
[quote name='solesurvivor' timestamp='1319593957' post='124558']
I am trying to make the left column the same height as the right column. When this is accomplished
the right border of the left column should be full length like central column but it only extends
to the word “advanced search” right now. anyone can help me with this one?
http://173.199.158.106/cspro223/index.php?dispatch=categories.view&category_id=87
[/quote]
It is because the left side column is only extending in height up until the last html tag being the advanced search making it 377px in height. The easiest method would be to remove the right side border from your left column. Then in styles.custom.css line 89 for your central container add a left side 1px border to your css class below. Giving you the look of the left side column having a right side border.
.container-right .central-column, .container-left .central-column {
This blog post has a number of examples of creating equal length columns a few different ways. But setting the left side border in the container is easiest.
http://www.ejeliot.com/blog/61
Lastly you can create a background image which is 1px high x however far across your entire content page spans. Then repeat-y the background so basically the 1px high image is repeated vertically and you can have a line going down the entire left side where ever you made it in photoshop. Pretty much a graphic 1px high Xpx wide clear bg and a single dot wherever the left side border would be.
Well I'm not 100% sure how to get the height to be 100%, but you can trick your customer to thinking that it is.
Just change your central column to:
.container-right .central-column, .container-left .central-column {
border-left: 1px solid #CCCCCC;
margin: 0 0 15px 172px;
padding: 0 0 15px 21px;
width: 750px;
}
And your left column to:
.left-column {
border-right: medium none;
float: left;
margin-left: -948px;
width: 175px;
}
That will put the border on the central column and bring it to the bottom.
I know it isnt' exactly what you wanted, but it might work.
Thanks,
Brandon
thanks guys i'll consider those options.