expand-y Div if needed?

[JoblessPunk]

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.

[TheDoc]

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

[JoblessPunk]

"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.

[TheDoc]

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:

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

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

[JoblessPunk]

"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:

https://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.

[JoblessPunk]

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.

[Author]

Posts