Why are these divs overlapping?

Question

I putting wmd on my website. After putting code in and giving it a spin i see this image below.

How can i make the preview div not overlap with the textarea? -edit- the black is the css background of div wmd-preview

some html

<div id="wmd-editor" class="wmd-panel"><div id="wmd-button-bar"></div>
<textarea id="wmd-input" name="body" rows="10" cols="89"></textarea>
...
</div></form><div id="wmd-preview" class="wmd-panel"></div>

Answer 1

Have you tried increasing the z-index of the preview div?

#wmd-preview { z-index: 100; }

Answer 2

Try adding a "Width" property value and "Float:Left" property value for the wmd-panel class.

width: value;
float: left;

If this does't work (and only if it doesn't work) trying setting a high margin-top value on the wmd-panel class. I.e.

margin-top: 25px;

Answer 3

Set the floats or if you need to be stingy set the "wmd-editor" as absolute positioning, for either just IE or all. I know its not the most effective way but it can be the easiest in some cases ^^