CSS - Could use some pointers on correct positioning

Question

Hi, I'm in need for some pointers on positioning. I've got this square which should be centered on the page. And with a logo and a logo font image kinda wrapped around the square. Now, I want this as dynamic as possible, because I use both the square and images elsewhere as well. So I can't really use stiff static positioning.

This is the site: www.matkalenderen.no

How should I do this? I want to logo to appear on the left side of the square. And the font to appear above the square. And the square itself should be centered. You probably get the picture :) Right now I've got a wrapper around everything, which is also centered.

HTML

<div id="loginWrapper">
   <img class="LogoChef" alt="Logo" src="img/LogoKokk.png"/>
   <img class="LogoMatkalender" alt="Logo" src="img/MatkalenderLogo.png"/>
   <div id="content" style="width: 250px;"></div>
</div>

CSS

#loginWrapper {
margin-left:auto;
margin-right:auto;
padding-top:80px;
width:600px;
}

#content {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#EADCBA;
background-image:url(img/KalendarRedTint.png);
background-position:right top;
background-repeat:no-repeat;
border:5px solid #F1E9D5;
margin-left:auto;
margin-right:auto;
padding:5px;
}

Answer 1

you'll have to use absolute positioning inside a relative positioned div. so you're logo and font needs to be absolute positioned inside the wrapper (which needs to be relative positioned).

elements that have absolute position within a relatively positioned element are treated with respect to the parent element. this gives you control to position the logo and font relative to the wrapper.

see this link