how to insert a div next to html form

问题:

in my site's contact us page there is a form. i need to display the address in a div next to the right of the form. the contact form is created using wordpress plugin shortcode in a page. i wrote this in the same page:

<div style="float:left;">
  hiii
 </div>

my form css is :

width:455px;border-right:1px solid #000;float:left;

but it displays it under the form.i have drawn a border-right for the form so that a vertical partition line will be displayed. what css codes to be used to make the div to the right side of the form?

回答1:

I have got these code from your page using firebug.

<div id="FSContact5" style="width:455px;border-right:1px solid #000;float:left;">
**<div style="clear:both;"></div>**
<div style="display:inline;float:right;"> hiii </div>

you have to remove the commented div that is

**<div style="clear:both;"></div>**

after form tag there is a div which style defined clear:both that is why your div bellow the form.Or you can set clear:none.

回答2:

<div style="float:left;">
   Your form here
 </div>

<div style="float:right;">
  Address goes here
 </div>

回答3:

My advice is not to use either floats or display:inline.

Instead use display:inline:block. Then you can add sizes and margin/padding etc.

Here's an example:

<style type="text/css">
div {
  display:inline-block;
  width:45%;
  vertical-align:top;
}
form {
  display:inline-block;
  width: 45%;
  vertical-align:top;
}
</style>

<div>this is on the left</div>
<form>
<label>On the Right</label>
<input type="submit" value="test">
</form>

回答4:

create a outer division and inside that create two division. Insert your contact form in one and your message in another division.

    <div id="Outer-div">
      <div id="inner-left-div">
        #contact form
      </div>
      <div id="inner-right-div">
        #side content
      </div>
    </div>    

add this CSS

    #inner-left-div { float:left; display:inline-block;}
    #inner-right-div { float:right; display:inline-block;}

here is your edited fiddle http://jsfiddle.net/2U7RS/