Text/Image Positioning Help

[Chris10]

I've been trying for the last few days to turn my little mock-up into an actual template and have figured most of it out accept for one problem I just can't seem to fix. In the screenshot, you can see the fairy's feet come down farther than the rest of the header and that automatically moved my sideboxes down. After 6 hours I finally figured out how to move them back up. But now the images and text that are supposed to show in those boxes are overlapping each other or something and I can't figure what part of the code changes that text and images. Any help would be appreciated!

[10west]

It's probably in the stylesheet around this area:
.sideBoxContent
Check the annotated stylesheets in zen wiki, and see whats controlling the text wrapping or image positioning within the side boxes.
In the admin area, you can also experiment with tools/layout boxes controller, or something to that effect, and mess with the width of the side boxes, as an experiment.

[Chris10]

Thanks for the reply. I went ahead and put it live on my site even though it's still messed up hoping someone can see something with the code because I am at a loss. Here it is http://www.faerydae.com

[stevesh]

I can't see what you did to move the sidebox columns up. If you let us know, we might be able to come up with a better way that doesn't do that. Otherwise, you can specify margin-top values for each of the sidebox headings to position them.

[Chris10]

Thanks stevesh. I added margin-top: -12em; under leftboxcontainer and under rightboxcontainer so it looks like this now...

.leftBoxContainer {
border: 1px solid #b7c5e2;
margin-top: -12em;
}

.rightBoxContainer {
border: 1px solid #b7c5e2;
margin-top: -12em;
}


That was the only thing I could get to move the sideboxes directly under the header.

[stevesh]

Try moving your negative margin to #navColumnOneWrapper and #navColumnTwoWrapper

[Chris10]

Thank you, thank you, thank you! Only problem is now for some reason the whole layout moved to the left lol! I didn't change anything other than adding that negative margin code.

[Chris10]

Just noticed the bar above the header disappeared too :/

[stevesh]

You have a lot of stuff in the stylesheet twice, including styling for #mainWrapper and the negative margin you added for the sidebox columns. I would go through it and clean out the duplicates. For now:

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin-top: -12em;
}

You need to remove the red part - you're adding the negative margin to the mainWrapper, too, so your navMain doesn't show.

You can add this to the bottom of the stylesheet to center things:

#mainWrapper {margin:auto;}

but once you get the stylesheet cleaned up, you can add the margin:auto; to the original #mainWrapper statement.

[Chris10]

Ahh it worked. I will have to clean it up ..I didn't realize there were so many duplicates. Thank you so much for all your help!!