...

View Full Version : How to achieve this layout



Roc
07-30-2007, 01:25 PM
I need possible ideas on formatting the following layout.

http://img54.imageshack.us/img54/2564/how01ip6.gif

Normally we would use the following divs

<div id='header-navigation'>
</div>

<div>
<div id='left-navigation>
</div>

<div id='right-main-content'>
</div></div>

<div id='footer'>
</div>But the problem with this layout is that the footer will not stick to the left navigation when the content field is longer than the left navigation.
http://img524.imageshack.us/img524/9382/how03tt0.gif

One possible way I can think of is this. But is there any other way to do it?

<div id='header-navigation'>
</div>

<div>
<div id='left-navigation>

<div id='right-main-content'>
</div>

</div>
</div>

<div id='footer'>
</div>

_Aerospace_Eng_
07-30-2007, 01:28 PM
You need to fake it meaning you need to fake the height of the left column. Good article here: http://alistapart.com/articles/fauxcolumns/
Another example here: http://bonrouge.com/2c-hf-fluid.php

srule_
07-30-2007, 01:33 PM
Not sure what the above articles say but the basic outline of how u do it is that u set a background image that is the width of your nav to your container div, use the background position properties to place it where u want, then u "repeat y".

the problem that you will run into doing this is that now the coloum is going to span 100% of the height of whatever div you put it in. you may have to get a little creative to hide some of it.


hopfully that sparked some ideas for you.

Roc
07-30-2007, 03:28 PM
Thanks for the tip aero.

However that question mark in the layout is a image. I want that image to stick to the footer as well. With the faking technique that wont be possible.

@srule - thanks, yeah I get it. We'll cross that bridge when we come to it. Presently I dont think that repeat-y is gonna help me. :)

EDIT - see the attached image, this is what I desire to achieve.

koyama
07-30-2007, 05:41 PM
However that question mark in the layout is a image. I want that image to stick to the footer as well. With the faking technique that wont be possible.
How about putting that question mark image within the footer while positioning it absolutely? You can use some negative top offset to get it positioned above the footer.

VIPStephan
07-30-2007, 05:43 PM
How about some absolute positioning then? This is one of the rare cases where it proves really useful (well, itís useful in many places and occasions but mostly itís not used wisely). You would put the image directly into the container, on the same level as the navigation and content containers, position the general container relative, and the image or other div, or whatever will be positioned absolute with bottom and left properties.


Haha, great minds think alike, Iíd say (and at the same time). ;)

Roc
07-30-2007, 06:39 PM
Seems to be working flawlessly in both IE7 and FF2.

Now I just need to fake the height of the left column.

Thanks guys.

VIPStephan
07-30-2007, 06:57 PM
Well, that would be where faux colums come into the gameÖ And in case the absolutely positioned image will overlap the sidebar content apply a bottom margin to that sidebar of as much as the height of the positioned image.

Roc
07-30-2007, 07:50 PM
Well, that would be where faux colums come into the gameÖ And in case the absolutely positioned image will overlap the sidebar content apply a bottom margin to that sidebar of as much as the height of the positioned image.
Faux columns is up and running. :thumbsup:
Yep I already put a bottom margin to it.

Thanks to everyone who helped me out on this, the issue has been resolved to my satisfaction. :p



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum