Fixing position of the left column in the homepage

[Mrs.Blak]

Hello guys.

I'm trying to fix the position of the left column with the aim that when you scroll down, the left column does not disappear as I show you in the following image.

 

 

This is code of the header.tpl where I added the left column.

<div id="page" class="container_9 clearfix">
            <div id="columns" class="grid_9 clearfix"> <!--alpha omega -->
                
                <!-- Left Column. I added this code Limones -->
                <div id="left_column" class="column grid_2" > <!-- omega -->
                    {$HOOK_LEFT_COLUMN}
                </div>
                
                <!--grid-7 break up the center column in 7 grids.Antonio -->
                <div id="center_column" class=" grid_7 alpha omega ">

I've added the following code css to the div left column tag 

<div id="left_column"  style="position:fixed"; class="column grid_2" > <!-- omega -->
					{$HOOK_LEFT_COLUMN}
				</div>
				
				<!--grid-7 break up the center column in 7 grids.Antonio -->
				<div id="center_column" class=" grid_7 alpha omega ">

and the result is  this.

 

Does anyone have  any idea how can I fix the position of the left column without that the central column is placed over the left column?

 

Thanx.

[vekia]

if position of left column is fixed, it's not a part of content block, its parent is body element

it means, that for #center_column you have to define margin-left with value equal to left column width

[Mrs.Blak]

Thank you. It looked like easy when you gave me the solution.

 I did it and the central column took the right position. But now I have to stop it so that the left column does not reach the footer.

 

 

Do you know what I have to do for that?  

Do I have to  change any parameter in javascript files?

 

Regards!!

 

 

Edited July 23, 2014 by anlibe (see edit history)

[vekia]

in this case you have to define margin-top mparam for footer section

it should be equal to your filter block height

[Mrs.Blak]

Hi Vekia. Thank again.

I don't understand very well what you mean. Following  your steps I have created a class in global.css .mparam{margin-top:585px;} 

/* ************************************************************************************************
		FOOTER
************************************************************************************************ */
#footer { width: 980px; margin: 0 auto; height: 120px; padding-top: 20px; padding-left: 10px; color:#000;  background:#fff; font-size: 11px; border-top-width: 3px; border-top-style: solid; border-top-color: #000;
}
.mparam{margin-top:585px;}
#footer a {color:#666!important;}
#footer a:hover {color:#333333;}

 I assigned it at <div id="footer" class="mparam"> in footer.tpl.

<div class="grid_10 alpha omega clearfix">
			<div id="footer" class="mparam">

But it isn't working.