Why are these divs overlapping?
-
25-09-2019 - |
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>
Solution
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;
OTHER TIPS
Have you tried increasing the z-index of the preview div?
#wmd-preview { z-index: 100; }
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 ^^
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow