View Full Version : CSS div Positioning Issues

04-21-2011, 10:46 PM
I found the solution, but will check this thread and take advice if you have any to offer, thanks

Hey all, I found your forum through a google search while looking for help on my project.

I'm more of a server side coder, so my CSS is rusty at best, and I seem to be having problems. Here's the situation:

I needed to have a ~15% opaque 'content box', I did this by using a .png background image. I was just going to make a 1px image and repeat it along the y axis to go easy on loading times, but an image with a height of 1000px was only 6.62kb, besides if I did it that way I could keep my shadowed borders.

Aside from that this seems to be the only way it has come close to properly working. I was considering making a ~5px image to put at the top of the <div> to cover the shadow for the top and top edges, then a 1px repeating background to shave some loading time, but either way I still don't think it will work with the code I have currently.

My structure is as such ( View Here: http://www.dreamlab.nu/r3ign ):

Body > Wrapper > Logo + Nav + Content Box > Content Box Modules

The Content Box is the ~15% opaque box, and it will not size properly when I place content inside of it. When I set the Content Box height to 100% it extends ridiculously far. If you've followed the link I posted above, the height on the content box is currently set to 30%.

If you need files you should be able to access them all via my above working directory ( http://www.dreamlab.nu/r3ign ).

Images in /images
global.css in main directory
index.php in main directory

Thank you for your help in advance, I'm sorry for the length of my post, but I tend to over explain everything.

EDIT: Also I added position:absolute; to the Content Box because it wouldn't budge past ~5px height unless it was being filled with text only. Perhaps I'm not using the function properly.
EDIT2: After reading w3s's article on CSS positioning, I am indeed using the function incorrectly, since no parent has a position, it is referring to the HTML tag, and will extend forever. I am unsure of how to fix this, and the problem still stands.
EDIT3: After more in depth reading at w3schools, I discovered position: relative; it seems to work properly now. It's amazing how simple something is when you step back from it for a second. Either way, if you have any suggestions on my code, or see something that's a no-no, please feel free to post, I'm always looking for tips.