Issues positioning a DIV in CSS

Question

I am trying to move the "available-rooms-dialog" div to the right of the textarea and alright the words "Available Rooms at the top. I have tried making the textarea width smaller but it still will not place where I want it. Here is my code:

cshtml:

<h2>General Chat</h2>

<div id="wrapper">

    <div id="upper-wrapper">
        <div id="discussion-dialog">
            <textarea rows="30" cols="50" id="discussion"></textarea>
        </div>
        <div id="available-rooms-dialog">
            <h4>Available Rooms</h4>
            <button type="button" id="createroom" value="Create Room"></button>
        </div>
    </div>
    <div id="message-dialog">
        <textarea rows="3" id="message">Type your message</textarea>
        <br/>
        <input type="button" id="sendmessage" value="Post" />
        <input type="hidden" id="displayname" />
        <input type="checkbox" id="enter-sends-message"/>
        Enter sends message
    </div>
</div>

here is my CSS:

div.container {
    position: relative; 
}
body {
    padding-top: 50px;
    padding-bottom: 20px;
}
#wrapper 
{
    position: relative;
}

#discussion 
{
    width: 75%;
    overflow-y: scroll;
}

#message 
{
    border: 3px solid #cccccc;
    width: 75%;
}


/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,



/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

#upper-wrapper {
    position: relative;
    width: 100%;
}

#discussion-dialog 
{
    /*border: 3px solid #cccccc;*/
    font-family: Tahoma, sans-serif;
    position: relative;
    top: 5px;
}
#available-rooms-dialog 
{
    position: relative;
    right: 0px;
    top: 0px;
}

#message-line {
    position: relative;
}

#message-dialog
{
    position: relative;
    top: 10px;
    font-family: Tahoma, sans-serif;
}

Here is what it currently looks like:

Answer 1

You can set your HTML and CSS as given below to arrange your div as required....

HTML -

<h2>General Chat</h2>

<div id="wrapper">
    <div id="upper-wrapper">
        <div id="discussion-dialog">
            <textarea rows="10" cols="50" id="discussion"></textarea>
        </div>
        <div id="available-rooms-dialog">
            <h4>Available Rooms</h4>
            <button type="button" id="createroom" value="Create Room"></button>
        </div>
        <div class="clear"></div>
    </div>
    <div id="message-dialog">
        <textarea rows="3" id="message">Type your message</textarea>
        <br/>
        <input type="button" id="sendmessage" value="Post" />
        <input type="hidden" id="displayname" />
        <input type="checkbox" id="enter-sends-message" />Enter sends message</div>
</div>

CSS -

div.container {
    position: relative;
}
body {
    padding-top: 50px;
    padding-bottom: 20px;
}
#wrapper {
    position: relative;
}
#discussion {
    width: 75%;
    overflow-y: scroll;
}
#message {
    border: 3px solid #cccccc;
    width: 75%;
}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input, select,
/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}
.field-validation-valid {
    display: none;
}
input.input-validation-error {
     border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
     border: 0 none;
}
.validation-summary-errors {
    color: #b94a48;
}
.validation-summary-valid {
    display: none;
}
#upper-wrapper {
    position: relative;
    width: 100%;
    float: left;
}
#discussion-dialog {
    /*border: 3px solid #cccccc;*/
    font-family: Tahoma, sans-serif;
    position: relative;
    float: left;
}
#available-rooms-dialog {
    position: relative;
    vertical-align: top;
    float: left;
}
#message-line {
    position: relative; 
}
#message-dialog {
    position: relative;
    top: 10px;
    font-family: Tahoma, sans-serif;
}
.clear {
    clear: both;   
}

Answer 2

#message-dialog {
 float: left;
}

#upper-wrapper {
    float: left;
}

Answer 3

One option would be to move the available-rooms-dialog above the discussion-dialog in your HTML, and float it to the right. I.e.:

<div id="upper-wrapper">
    <div id="available-rooms-dialog">
        <h4>Available Rooms</h4>
        <button type="button" id="createroom" value="Create Room"></button>
    </div>
    <div id="discussion-dialog">
        <textarea rows="30" cols="50" id="discussion"></textarea>
    </div>
</div>

#available-rooms-dialog 
{
    float: right;
}

Example: http://jsfiddle.net/VxU5Y/