CODEWITHSUNDEEP
htmlcsstinymcetextarea
user701510
user701510

Reputation: 5763

TinyMCE won't center

No matter what I try to do, I can't get my tinyMCE text editor to center properly.

here's the markup:

<div id="container">    
<form method="POST" id="tiny_mce"><div class="title">YOUR POSTING</div><br>
    Title:<br />
    <input type="text" name="title"  /><br /><br />
    Your words:<br />
    <textarea name="words" class="tinymce" cols="30" rows="10"></textarea>
    <br /><br />
    <input type="submit" name="submit" value="SUBMIT"  />  
    </form>
</div>

CSS:

*{
margin: 0;
padding: 0; 

}
body,html{
    margin:0 auto;

}
#container{
width:1200px;
border:0px solid black;
height:600px;
margin:0 auto;
}
#tiny_mce{
display:block !important;
float:left;
margin-left:auto;
margin-right:auto;
}
#tiny_mce input{
float:left;
}

Upvotes: 1

Views: 4491

Answers (2)

Rohan Patil
Rohan Patil

Reputation: 2348

Just remove float:left and give width to the tiny_mce. It will work.

#tiny_mce {
    display: block !important;
    margin-left: auto;
    margin-right: auto;
    width: 600px;     // You can give anything
}

http://jsfiddle.net/Nw8SJ/

Upvotes: 3

IvanL
IvanL

Reputation: 2485

This is due to the strange combination of your floating + having no width. You are trying to center an object which you wish to be entirely to the left, this is in direct conflict with each other. Also your #tiny_mce CSS has no width thus the auto-auto on left and right margins won't work since the browser doesn't know how big the block element will be. Removing the float and adding a width will center your tiny_mce.

Upvotes: 1

Related Questions