How to use top middle and center inside a div

Question

I have a container within another container which I want to use three sections. A element at the top, an element in the middle and a element at the bottom.

Can someone help me figure out how to style those elements to display properly?

http://jsfiddle.net/WSFnX/877/

Here's the HTML code:

<div class='main'>
    <div class='outer'>
        <div class='inner'>
            <b>header</b>
            <hr/>
            <h3>Middle Text</h3>
            <img src="http://dummyimage.com/50x50/f0f/fff"/>
        </div>
    </div>
</div>

and CSS:

.main {
    background: #ccc;
    width: 900px;
    height: 600px;
    padding: 50px;
}

.outer {
    border: 1px solid #ccc;
    width: 800px;
    height: 500px;
    border-radius: 5px;
    margin: 10px auto;
    background: #fafafa;
}

.inner {
    border: 1px solid #ccc;
    width: 400px;
    height: 300px;
    margin: 50px auto;
    background: #fff;
    text-align: center;
    position: relative;
}

.inner b {
    font-size: 0.65em;
    text-align: center;
}

.inner hr {
    margin: 0;
    padding: 0;
}

Answer 1

Did you want something like this?

http://jsfiddle.net/6tE7k/

You can change these:

min-height:500px;
min-height:100px;

to whatever height you need.

If you look at it on a fullscreen, you can see it's a div container within a div container. The nested div is set for 1024px.