Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Roc
    Roc is offline
    New Coder
    Join Date
    Jul 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to achieve this layout

    I need possible ideas on formatting the following layout.



    Normally we would use the following divs
    Code:
     <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.


    One possible way I can think of is this. But is there any other way to do it?
    Code:
     <div id='header-navigation'>
     </div>
    
     <div>
    <div id='left-navigation> <div id='right-main-content'> </div> </div>
    </div> <div id='footer'> </div>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    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.
    Last edited by srule_; 07-30-2007 at 01:50 PM.

  • #4
    Roc
    Roc is offline
    New Coder
    Join Date
    Jul 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails How to achieve this layout-desired.png  
    Last edited by Roc; 07-30-2007 at 03:58 PM.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Roc View Post
    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.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    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.

    Edit:
    Haha, great minds think alike, I’d say (and at the same time).
    Last edited by VIPStephan; 07-30-2007 at 05:45 PM.

  • #7
    Roc
    Roc is offline
    New Coder
    Join Date
    Jul 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Seems to be working flawlessly in both IE7 and FF2.

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

    Thanks guys.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    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.

  • #9
    Roc
    Roc is offline
    New Coder
    Join Date
    Jul 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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.
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •