How to get messages column up on the right? - html

Question

HTML Section :
<div id='wrapper'>
<div id='box'>
Name:<br>
<input type='text' id='name' size='10'><br><br>
Message:<br>
<textarea id='message' size='15' ></textarea><br><br>
<br>
<div id='Send'> Send</div>
</div>
<div class='messages'>
<div id='loader'></div>
<ul class='update'></ul>
<?php //include(messages.php) ?>
</div>
</div>
CSS Section:
#box{
width:300px;
height: 230px;
border:solid #6895CC 1px;
-webkit-box-shadow: 0 2px 5px #666;
box-shadow: 0 2px 5px #666;
padding: 10px;
margin:50px 0 0 400px;
}
#name{
width:300px;
height: auto;
border:solid #6895CC 1px;
padding: 10px;
margin:5px 5px 0 2px;
border-radius: 5px;
}
#message{
width:300px;
height: auto;
border:solid #6895CC 1px;
padding: 10px;
margin:5px 5px 0 2px;
border-radius: 5px;
}
#send{
width: 50px;
border-radius: 5px;
padding: 5px;
background-color:#6895CC;
border:none;
color:#fff;
}
#send:hover{
background-color:#4E65C0;
}
body{
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
.messages{
display:inline;
width:250px;
height:638px;
overflow:hidden;
border:solid #8CACDD;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
float:right;
border-width:0 0 1px 1px;
}
How do i move the messages column up on the right ? I have already included the inline element which removes any next line character before and after. what needs to be done to get it up ?

Answer 1

try giving float:left to CSS #box.
#box {
border: 1px solid #6895CC;
box-shadow: 0 2px 5px #666666;
float: left;
height: 230px;
margin: 50px 0 0 400px;
padding: 10px;
width: 300px;
}

Answer 2

I'm not really sure where exactly you imagine to be "up on the right".
I guessed you mean up on the right side within the form.
To do that you have to give your form elements a wrapper div, like:
<div id='Form'>
<div id='box'>
Name:<br>
<input type='text' id='name' size='10'><br><br>
Message:<br>
<textarea id='message' size='15' ></textarea><br><br>
<br>
<div id='Send'> Send</div>
</div>
<div class='messages'>
<div id='loader'>test</div>
<ul class='update'></ul>
<?php //include(messages.php) ?>
</div>
</div>
and give the wrapper #Form element position: relative; and the .messages:
position: absolute;
top: 0;
right: 0;
look here if it what you want: FIDDLE