Grow your CSS skills. Land your dream job.

expand-y Div if needed?

  • # October 21, 2009 at 3:44 pm

    Hello,
    I’m having a hard time trying to figure this out, maybe someone could help me out.

    I’m designing a website for a client and I want it to be as simple as possible for him to go in and edit the body-copy as needed. I have it set up (well setting it up) so that the #copy div will display information from a different page. So for example if you are at the home page the #copy div shows the page info from "home.html"

    Here is a URL to the page I’m working on:
    http://www.joblesspunkdesigns.com/clvs/

    I’m running into 2 problems at the moment.

    First – I don’t know how to expand the #copy div down if needed. I can go in and edit the #container div so that it has a height of 3000px and the things I have to stick to the bottom and do what they are told. But I can’t get the #container div or the #copy div to expand and push the page down if needed.

    Code:
    #container {
    position:relative;
    z-index:2;
    width:852px;
    height:1020px;
    overflow:hidden;
    margin:0 auto;
    text-align:left;
    background:#FFF;
    }

    #copy {
    position:absolute;
    width:555px;
    height:100%;
    left:263px;
    top:261px;
    }

    *I have the overflow set to hidden because I get a weird 500px space at the bottom
    *I tried changing the height to 100%, auto, max-height=XXX, min-height=XXX and nothing would push the page down if needed.

    Second -
    I’m not sure this is the best way to do it, but on my home/index.html page in the #content div I wanted to link the home information to my home.html. I used object and embed tags to do it, and I don’t know how to set it up so the text will push the page down and not add a scroll bar.

    Code:

    *I have tried 100% and auto and they don’t work. they just make the box about a 30px height.

    Also,
    I don’t really understand the CSS div code:

    Code:
    position;absolute;
    position:relative;
    position;inherit;
    position:fixed;
    position:static;

    I read somewhere that you should code with a relative position and use absolute rarely. It seems like if I try to do an all relative position for my div’s the page kinda blows up. So I flip-flop between absolute and relative, whatever works out best for the item.

    Anyways,
    Can anyone please help me out? I bet it is something really simple, but I can’t figure it out.

    # October 21, 2009 at 3:47 pm

    Divs will always expand to the content contained within them as long as you don’t set the height of the div.

    # October 21, 2009 at 3:59 pm
    "TheDoc" wrote:
    Divs will always expand to the content contained within them as long as you don’t set the height of the div.

    I tried not defining the #container/#copy div height but the div shrinks to about a 20px high div aligned to the top.

    # October 21, 2009 at 5:44 pm

    That means you have faaaar bigger problems. Depending on where your floated items are, you’ll need to make sure to clear them. Chris has a great article on that here:

    http://css-tricks.com/all-about-floats/

    At the end of the day, you just won’t be able to use a fixed height.

    # October 21, 2009 at 6:59 pm
    "TheDoc" wrote:
    That means you have faaaar bigger problems. Depending on where your floated items are, you’ll need to make sure to clear them. Chris has a great article on that here:

    http://css-tricks.com/all-about-floats/

    At the end of the day, you just won’t be able to use a fixed height.

    hmm :/
    thank you, I will read that article.

    # October 22, 2009 at 7:22 am

    Alright, I got it to work.
    A lot of tweaking, and I’m not sure I would be able to retrace my steps.

    There are still a few minor bugs I will work out, but I’m having a kinda weird one.

    So my legal information is suppose to be static and stick to the bottom of the page. But I was running into 2 problems.

    One -
    When I had it stick to the bottom of the page my #copy div would push the page down, but would act like the #legal div was just a background image and would go over it instead of pushing it down with it.

    Two – When I have the #legal div relative to the #copy div, yes if the body copy did need to push down the page the #legal div will get pushed down with it, but if the information is short then the #legal div will be right below the info… so it will be anywhere and NOT a static point.

    here is the code:

    Code:
    HTML:

    Code:
    CSS:
    #legal {
    position:absolute;
    width:555px;
    height:27px;
    margin-bottom:5px;
    }

    and here is the link to my comp page:
    http://www.joblesspunkdesigns.com/clvs/
    *the home button is the only one that "works" at the moment.

    I know there is slight movement, and the legal info gets cut off, I will deal with that later. I just cant figure how to make the #legal div stick on the bottom with the #copy div not going over it, reacting with it and pushing that down the page as well.

    Thanks.

    ___________________________________________________________________________________________

    I just had to sleep on it and the answer came to me. I re-organized my divs on my index.html so that the legal info is attached to the sidebar instead of the bottom of the #copy div. Then added a margin-bottom:20px; to the #copy div so it doesn’t run into the legal info.

    Thank you TheDoc for pointing out what my problem was. It wasn’t an easy fix, but at least I knew witch direction to go in.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".