Question

I am making my first layout by using full div elements but I have encountered a problem.
I have a div with fixed position, and auto height(will expand based on content) but I can’t seem to be able to place another div below it. How can the div below automatically be positioned depending on the height of the div above?

These divs will be included inside a wrapper div that places them on the center of the screen.

JSFIDDLE: http://jsfiddle.net/kfbjd/ (note that the first div has a top value so the bottom div overrides it)
Fixed jsfiddle: http://jsfiddle.net/kfbjd/14/

<div id="main">
<div id="maintext">MAIN</div>

</div>

<div id="about">
<div id="maintext">ABOUT</div>

</div>

<style type="text/css">
#main{
    background-color:#000;
    width:900px;
    top:129px;
    position:fixed;
}

#about{
    background-color:#000;
    width:900px;
    position:relative;
}
</style>

Thanks for your suggestions adding top:129px to #about fixed it. There is an issue though, although it appears correctly on the jsfiddle on my browser the text appears wrapped:

Answer 1

If you move your #about inside #main, it will correctly position itself http://jsfiddle.net/kfbjd/3/

If you can’t do that, you can just add

top:129px;

To the #about div (matching what you already gave to #main). http://jsfiddle.net/kfbjd/5/