PDA

View Full Version : Dynamically changing height?



colin8
Jan 7th, 2007, 05:30 AM
I am creating a template for a design company and I have run into some problems. This is my first project that I'm coding for someone other than myself or a friend. Usually I know what all is going to be on there, so I code accordingly. However I have no idea how much content will be on there and the content will be changing a lot. When I was testing, I can't add a lot of text to a text box without it going over the bottom of the design. What I would like to be able to do is write as much as I want, and have the height of the wrapper div get longer accordingly. I realize I am probably going to have to recode a bunch of the design to make this work, and I'm okay with that. Any help is appreciated.

Note: I know the right box doesn't display properly in FF or Opera yet, it's best viewed in IE.

Site (http://dominicanrealestateira.com/Dominican%20IRA/index.html)
Style Sheet (http://dominicanrealestateira.com/Dominican%20IRA/style.css)

Oh and by the way, if you take a look at the code, you will see a #test that controls the background of the wrapper. Just pretend that it's not there, later I am going to go back and combine that into the #wrapper.

Thanks in advance for the help!

Arbitrator
Jan 7th, 2007, 06:09 AM
Itís simple: remove height: 820px. And yes, youíre going to need to recode some things to get your footer back. This is why you donít make a layout dependent upon things like absolute positioning.

colin8
Jan 7th, 2007, 06:16 AM
When I take off the height: 820px, the wrapper doesn't show up at all. Any other ideas? I have about 9 more days to submit the design, so I don't mind drastically changing the code to get the effect I am looking for.

Arbitrator
Jan 7th, 2007, 06:36 AM
The wrapper doesnít show up because all of the contents are absolutely positioned. Absolutely positioned elements are removed from normal document flow and donít take up any space. Thus the below ó


<div>
<div style="position: absolute;">Text.</div>
<div style="position: absolute;">Text.</div>
<div style="position: absolute;">Text.</div>
</div>

ó is functionally equivalent to ó


<div></div>

ó for the purpose of determining the dimensions of the wrapper.

_Aerospace_Eng_
Jan 7th, 2007, 06:43 AM
This is why you should know what you are doing before you try doing something for someone else.

colin8
Jan 7th, 2007, 07:06 AM
This is why you should know what you are doing before you try doing something for someone else.

Thank you for your help sir...

And yes I know that absolutely positioning objects takes them out of the normal flow, what I am asking for is the RIGHT way to do it.

_Aerospace_Eng_
Jan 7th, 2007, 07:43 AM
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

colin8
Jan 7th, 2007, 08:57 AM
Thank you for your help, I definitely should have mastered fluid layouts before I accepted this job. However I am making good progress, as it shows up pretty nicely in IE. However in FF2 the wrapper doesn't go all the way down to the end of the page, it only goes a certain distance than stops. Any ideas?

Site (http://dominicanrealestateira.com/Dominican%20Test/index.html)
Stylesheet (http://dominicanrealestateira.com/Dominican%20Test/style.css)

Arbitrator
Jan 7th, 2007, 09:36 AM
Thank you for your help, I definitely should have mastered fluid layouts before I accepted this job. However I am making good progress, as it shows up pretty nicely in IE. However in FF2 the wrapper doesn't go all the way down to the end of the page, it only goes a certain distance than stops. Any ideas?Youíre using Internet Explorer 6 I take it? It looks identical in that respect in both Firefox 2 and Internet Explorer 7. If you set a height (of 820 pixels), good browsers will respect your measurement. Internet Explorer 6 on the other hand ignores the measurement and extends the box anyway. (http://www.positioniseverything.net/explorer/expandingboxbug.html) The solution is to get rid of the height or use min-height while exploiting IE6ís flaw (IE6 doesnít support min-height).

colin8
Jan 7th, 2007, 06:19 PM
Thank you so much! I actually knew everything you said, I just completely forgot that I still had height set at 820px, I thought I deleted it entirely. Again thanks a lot, y'all saved me with this project (not to mention I'm now prepared for a lot more projects in the future).