Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member Richard S's Avatar
    Join Date
    Jul 2004
    Location
    SW Lonodn
    Posts
    219
    Member #
    6728
    Liked
    3 times
    Hi,

    This must be easy to solve, but I'm new to CSS and I'm completly stuck.

    Basicly I'm building a simple template for a site. Very simple, just a title <div>, a content <div> and a footer <div>. All three are contained in a container <div> that is horizontaly centred.

    I want the content div to streach depending on how much content it contains and the footer <div> to be at the bottom (whilst still contained in the container.

    Like this:

    #master {
    position:relative;
    left:50%;
    top:10px;
    width:790px;
    margin-left: -395px;
    margin-bottom:10px;

    }

    #title {
    position:absolute;
    left:0px;
    top:0px;
    margin:0px;
    height:100%;
    }

    #main {
    position:absolute;
    left:0px;
    top:151px;
    width:100%;
    height:100%;
    background-color:#D7E1FF;
    background-image:url(images/index_02.jpg);
    }

    #footer {
    position:absolute;
    left:0px;
    width:790px;
    height:11px;
    top:100%;
    background-image:url(images/index_03.jpg);
    background-repeat:no-repeat;
    }


    The trouble is the footer <div> pops out of the container <div> and just displays at the top.

    I seem to have tried everything I can think of but can't find a soloution.

    Please help this is driving me mad. There must be a simple soloution.

    Thanks.

  2.  

  3. #2
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    let me rewrite that code, and see if it works. Keep the original someplace of course just in case this flops.

    #master {
    margin 10px auto 10px auto;
    width:790px;
    }

    #title {
    width:790px;
    margin:0px;
    }

    #main {
    width:790px;
    background: #D7E1FF url(images/index_02.jpg);
    }

    #footer {
    width:790px;
    height:11px;
    background: url(images/index_03.jpg) no-repeat;
    }

    If you do that, the div master will be centered. The title div will be as large in height as whatever you put it in. You can adjust the height with either the height attribute or you can add vertical padding to it. The div main will stretch vertically depending on the content. Again you can change that with padding or height attributes. And finally the footer will be stuck onto the bottom.

    Usually when I code CSS I just let the divs sort of stack on eachother. I don't know how orthodox of a practic this is, but it always works for me.

    I used to use the position attribute, but that always messed me up more than helped me. Position:absolute; is especially a pain. More a hindrance than a helper if you want a centered site because absolute positioning calculates from the top right corner of the browser no matter if you use a container div.

  4. #3
    Senior Member Richard S's Avatar
    Join Date
    Jul 2004
    Location
    SW Lonodn
    Posts
    219
    Member #
    6728
    Liked
    3 times
    Thanks Eddy,

    But I couldn't ge that to work, the auto margines dosn't center the page and the bottom margine dosn't display at all.

    I've kinda got round it by:

    #master {
    position:relative;
    left:50%;
    top:10px;
    width:790px;
    margin-left: -395px;


    }

    #title {
    position:absolute;
    left:0px;
    top:0px;
    margin:0px;
    }

    #main {
    position:absolute;
    left:0px;
    top:151px;
    width:100%;
    background-color:#D7E1FF;
    background-image:url(images/index_02.jpg);
    }

    -->
    </style>

    I've completly got rid of the div for the footer and instead placed the footer image in at the bottom of the main div.

    Works great in Firefox, but in IE you get couple of pixels stickout the bottom of the footer image.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:46 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com