CSS 4 MP

making rail on the left in Liquid Layouts

Feb 27, '08 5:04 PM
by maria for everyone

Category:

Other

putting the rail to the left in liquid Layouts

The code works in all the Liquid layouts:
SKYLINE, BLACKLILY, OASIS, BASECAMP (leaving the menu to the right), CLEAN

This code just put the rail in the left

normally the footer is kept downward by the rail; for making the rail to the left it is needs make it floating (using float or position absolute) - I decided to use position absolute) - consequentially to the floating when the page is void the footer come up covering the rail
I found two possible solutions to this issue: it means I have not found the Perfect solution ;)
FIrst version a fixed min - heigth for the site
The problem of this code is that the footer will be all time at least at 1400 pixel from the top of the page due to preserving the space for the google ads
Second version reduced footer
you make the footer as the body - content; that is from the right border of the (left) rail to the right border of the browser's window and not taking up the whole width of the window

You have to adjust the top postion for the rail depending by the theme u use

Bad thing not possible to assign in td#maincontent the margin-left:200px; so I use the padding-left

First Version

/****RAIL ON THE LEFT ver.1 fixed min height****/
/****´¯`·.¸¸.·°°****/
/* moving down the footer of at least 1300px */
div.contentwrapper {
min-height: 1300px;
/* min height ie hack */
height: auto !important;
height: 1300px;
}
td#maincontent {
padding-left: 200px; /* creating space 4 d rail */
}
/* moving the rail */
td.rail {
left: 0px; /* makes space between rail and left border */
position: absolute;
top: 250px; /* vertical position 4 d rail */
}
/****END RAIL ON THE LEFT ver.1****/

Second Version

/****RAIL ON THE LEFT ver.2 reduced footer****/
/****´¯`·.¸¸.·°°****/
td#maincontent {
padding-left: 200px; /* creating space 4 d rail */
}
/* moving the rail */
td.rail {
left: 0px; /* makes space between rail and left border */
position: absolute;
top: 250px; /* vertical position 4 d rail */
}
/* Adjusting the footer */
#page_end {
margin-left: 200px;
position: relative;
}
/****END RAIL ON THE LEFT ver.2****/

Tags: liquid layout, left rail

Prev: stretched layout due to images in comments - guestbook and threads overflow
Next: Rail in the Left 4 all themes with a Fixed Width

reply share

27 Comments

simplyrobin wrote on Feb 27

I don't understand what you mean by liquid layout ?

alogena wrote on Feb 27, edited on Feb 27

a liquid layout is when the content is expanded in the whole visible page; the rail is to the extreme right of the window and the content is expanded in all the visible page
it is liquid cause the text change position in the lines when u resize the browser's window

the other themes have a fixed width for the page (about 800px normally) and text does not change position when u resize browser

1timelessdove wrote on Feb 27

i tried both and it made the boxes go to the middle of the page. there was an empty space on the right where the rail normally is.

lfom wrote on Feb 27

Hmmm, interesting... But why 'reduced footer'? Actually you're fixing the position of the 'page_end', and not even touching 'ownedfooter'.

alogena wrote on Feb 27

1timelessdove said

i tried both and it made the boxes go to the middle of the page. there was an empty space on the right where the rail normally is.

whats the browser are u using ? (the version too)

alogena wrote on Feb 27

lfom said

Hmmm, interesting... But why 'reduced footer'? Actually you're fixing the position of the 'page_end', and not even touching 'ownedfooter'.

yup
page_end contains the footer

margin-left: 200px; make the space

1timelessdove wrote on Feb 27

firefox 2.0.0.12

Comment deleted at the request of the author.

tiedbyfate wrote on Feb 27

if this works (fine) good in IE and Fx then i will give this a rate of 6.
Keep it up Mam Maria :thumbs up: thanks for this one.

13thproduction wrote on Feb 27

thanx alogena.....it works for me.......

Comment deleted at the request of the author.

alogena wrote on Feb 28

13thproduction said

it works for me.......

the white border in ur site
comes from this block you added

div#page_start {
background-image:url();
border:1px solid #FFFFFF;
margin:0pt auto;
width:830px;
}

alogena wrote on Feb 28

the code looks much more simple
I was tricked by my widgets in the right area of my test page

kisslychai wrote on Apr 5, edited on Apr 5

hi there,whats the difference between the first and the second version? my site is a crap :'( please help. thanks.

alogena wrote on Apr 5, edited on Apr 5

I could help you to make a better crap of your site.,,,., but u have to say me more precisely what is the problem you got
what is the area you want to modify NOW ?
the header ? the nav bar ? the banner the text color the ,,.

you have to say me where u get the problems

I cannot resume in one reply the whole good code as you like ^_^
so make a more precisely question :)

probably is better if u do not use this code yet
this code is just a strangeness ..
I made it cause sometime someone asked how to put the rail to the left of the content

actually in this site I'm using skyline with this code for moving the rail to the left (first version)
the difference between first and second version is just in the Footer ...
but I' think you have to know before as to put the banner , how to customize the navigation bar and so on

alogena wrote on Apr 5, edited on Apr 5

anyway at the moment your site is not messed
I think you have to start placing the background for the whole site, a banner (the image at the top of the site) , moving the site title and changing the navigation bar
what do u think ?

kisslychai wrote on Apr 5

I tought it was easy as friendster but I got difficulties on making it better. headache headache ~_~ errr anyway thanks for the response :)

alogena wrote on Apr 5

I don't know how work firendster
but if you have absolutely no knowledge of css I suppose it is not completely immediate

kisslychai wrote on Apr 5

thanks miss alogena :) i think im contented with my site now. lol
and thanks to Mr.Baron ^_^ I'll update my site if Im not lazy anymore lol
check out my profile at friendster.com if you want, its chai_cambria@yahoo.com

alogena wrote on Apr 5

I found it
anyway your profile is restricted to your friends ^.^

the layout in friendster from what I saw now is much more elementary

you can only customize the background and change the item boxes
at the top there is the unmovable ad
I don't know if it is possible to modify the navigation bar and the footer

for sure here you can to define all these object more you have the right rail (where is the headshot and some link and the google ads) and you can put a custom banner at the top of the site

the layout here is much more complex

kisslychai wrote on Apr 5

^_^ my profile is restricted for my own protection lol
yeah the layout here is more complex than friendster ;p
so I hope I could make my site better not messed up lol

alogena wrote on Apr 5

I can say you that you are making a good arrangement

ishq16 wrote on May 14

i tried using both codes but iam using the first version, but my page had an empty space on the left when i moved my the right rail there. What can i do to adjust it?

alogena wrote on May 16

ishq16 said

i tried using both codes but iam using the first version, but my page had an empty space on the left when i moved my the right rail there.

I'm not sure to understand
what I see is when you resize the browser and it becomes small the content of the site overlap the left rail area

technically you are using sandskrit
it is a "centered" theme with a fixed width ,, .so maybe you should use the other code for the centered themes in the next post

alogena wrote on May 16, edited on May 16

ishq16 said

What can i do to adjust it?

could you explain better the problem ?
it is about the content overlapping the left rail?

I see the rail at the left border of the window now ..
anyway
in a centered theme (such as in sandskrit) it is natural that the rail maintains the space from the left border
it is the same "reflexed" space you have in the normal layout between the right rail and the right border of the window

audio reply video reply

Add a Comment

grouped

CSS 4 MP

Join this Group!

Report Abuse

Create a New Account

Who is on Multiply?

Want to learn more?

Already a Member?

CSS 4 MP