Keep DIV in Spot when DIV next to it Changes In Size
So I've got a div which is populated via AJAX, and when it changes size the div next to it moves down with the bottom edge of the div next to it. How do I get it so that the div on the right stays in place?
<div class="body">
<div class="slection">
<div class="selector">
<select name="users" onchange="showUser(this.value)">
<option value="Select day...">Select day...</option>
<?php
$pathToMe = dirname(__FILE__);
$path = $pathToMe . "/days/";
$handle=opendir($path);
while ($file=readdir($handle))
{
if (($file == ".") || ($file == "..")){
}
else echo "\t<option value='".$file."'>".$file."</option>\n";
}
?>
</select>
</div>
<div id="content"></div>
</div>
<div class="sms">
<div style="text-align:center开发者_StackOverflow">
Send SMS to client
</div>
<div style="text-align:center">
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<input type="text" name="number" id="number" size="14" value="Number" class="text-input" />
<br /><br />
<textarea type="text" name="message" id="message" value="Message" class="text-input"></textarea>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
And the CSS:
.header {
height:30px;
}
.body {
min-width:400px;
max-width:700px;
min-height:200px;
margin-left:auto;
margin-right:auto;
width:500px
}
.sms {
float:right;
margin-top:-20px;
}
.selection {
float:left;
}
Live example here.
add
pre{
width:200px;
float:left;
}
to your CSS.
Currently the pre
takes the width of the whole area. Defining it as 200px wide still won't bring the other element up to the same level as it is with isn't display:inline;
, so that's why you need the float
as well.
精彩评论