Question

<div id="posted_wrap">
    <div id="posted_middle">
        <div id="posted_top"></div>
        <div id="textcontent">
            <br /><p>ARTICLE</p>
        </div>
        <br />
             <div id="posted_bottom"></div>
    </div>

</div>

The above div product the following UI:

The long text you see represents the article.

Problem 1: I need to let this long text moves automatically into the new line. Example:

Problem 2: How can i set a specific fixed minimum height e.g. 300px , so if a user enters few lines, the article box doesn’t look too short.

CSS Details – This is my first project, not familiar with web-design:
posted_wrap {
position: relative;
padding: 0px;
margin-right: 55px;
margin-top: 25px;
}

textcontent {   
    margin-right: 25px;
}

    textcontent p { 
             margin:0 auto;
             text-align:center;
             width: 663px;
    }

posted_top {
    width:688px;
    height: 9px;
    margin: 10px 0 0 0;
    margin-right: 0px;
    background: url(images/postedcontent_top.png) no-repeat center top;
}

posted_middle {
    width:688px;
    background: url(images/postedcontent_middle.png) repeat-y center center;
}

posted_bottom{
    width:688px;
    height: 44px;
    background: url(images/postedcontent_bottom.png) no-repeat center bottom;
}

Answer 1

set a width:

textcontent p {
width:640px
}

and use min-height for problem 2

EDIT: Your words shouldn’t be too looooooooooooooooooooooong. Generate random texts instead of a long aaaaaaaaa.