开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜