|
hello
i am working on a website for something my boss is trying to start. I'm just working on all the front end stuff, like the actual website and ive run into a problem that i really have no idea how to fix.
i usually google everything but in this case, i wouldnt even know what or how to google it.
this is what it's supposed to look like:
http://shipyizi.com/v2/
and this is what it looks like right now:
http://shipyizi.com/
Okay, so here's the problem.
I'll illustrate with a picture first:
![[image loading]](http://s9.postimage.org/x5o6s3o3j/webhelp.jpg)
so the boxes labeled 1, 2, and 3 are all separate div ids, and they are all nested in another div id.
i set the main div id (the div containing these boxes) height as "auto"
now these 1,2,3 boxes need to have variable height, because their content is different. BUT what i need is for all 3 of them to automatically have the sameheight as the longest one.. if that makes sense.
anyone know a trick or something? would really appreciaate it
|
Try setting them to 100% as opposed to auto or setting a px value. 
|
On February 10 2012 07:22 Anachromy wrote:Try setting them to 100% as opposed to auto or setting a px value.
this
User was warned for this post
|
Do you use one a dem browser addons for debugging css?
Just tried it 100% doesn't work
See he has the css for the right content box inside the div header for the main body content of the page.
He wants everything to have the same height in the main body.
You can write like 648px instead in each box but I doubt that's the best way to approach the problem.
Too complicated for me. Perhaps a real web designer can help you
|
Don't set an exact value. Use %.
|
easiest fix i could think of is giving #mainContentHolder a "background: url(...) repeat-y;" with some kind of 1px height image.
height 100% with nested (child) elements only works if the parent also is set to height 100%. that screws things up at the "top of the stack". like, for the very first element 100% height is somewhat the full page. so the nested divs will extend further than expected.
![[image loading]](http://666kb.com/i/c14hbcvq114wjov8z.gif)
![[image loading]](http://666kb.com/i/c14hbgy7j25uyr0vn.gif)
|
Your CSS does a lot of bad things that make it clumsy to debug. Don't use px for positioning when % are sufficient. Don't use absolute/fixed when it isn't necessary, it just makes things less flexible (& intuitive).
|
On February 10 2012 08:08 biomech wrote:easiest fix i could think of is giving #mainContentHolder a "background: url(...) repeat-y;" with some kind of 1px height image. height 100% with nested (child) elements only works if the parent also is set to height 100%. that screws things up at the "top of the stack". like, for the very first element 100% height is somewhat the full page. so the nested divs will extend further than expected.
using a 1px height image would work if the middle section (box 2) were the tallest box in every page. but in the case that it ends up shorter than the other 2 (boxes 1 and 3), then box 2 would appear to have a different color at the bottom of it after its contents ends 
thanks guys i really appreciate all your input! im testing a lot of different approaches to this using all the advice, hopefully some of them, or some combination thereof, works
|
Canada5155 Posts
|
On February 10 2012 08:18 mmp wrote:
Your CSS does a lot of bad things that make it clumsy to debug. Don't use px for positioning when % are sufficient. Don't use absolute/fixed when it isn't necessary, it just makes things less flexible (& intuitive).
Thanks for the tip! im really not that experienced in webdesign, i just try random codes and if it appears to me to turn out okay i just go with it.. not really sure how to optimize it i guess
|
On February 10 2012 08:21 BlueRoyaL wrote:using a 1px height image would work if the middle section (box 2) were the tallest box in every page. but in the case that it ends up shorter than the other 2 (boxes 1 and 3), then box 2 would appear to have a different color at the bottom of it after its contents ends
nah. it fixes it fo sho! i promise
see, here 3 is the "tallest box".
![[image loading]](http://f.666kb.com/i/c14hgqvh3ve2ien8z.gif)
|
biomech,
wow that's awesome. could you provide a little more detailed information on how you got that?
did you make a 1x1 pixel image with that green background and fill it in into only the main content holder div?
the link hawaiian pig is very nice too, but i like biomechs fix a little better - its simpler and faster
|
|
|
|
|
|
EPT
