Using css3 to horizontally align the div tags

Question

Please how do i horizontally align two contents of div tags using css3.The total width of my enclosing body is 950 pixel and i specified the width for the first div tag as 470 pixel. My assumption is that the second div tag will occupy the remaining space which is 480 pixel but it didn't whereas it is positioned

This is the html code

<div class="left colborder">
    <p>To know what's cooking you can check our <a href="#"> events </a> for more
        <br />For more information Contact Us</p>
    <div class="left-ContactInformation">
        <img src="Picture%20Related/Email%20Logo.png" alt="Email Address Icon" title="Email Address Icon" id="EmailAddressIcon" />j.banti09@gmail.com
        <br />
        <img src="Picture%20Related/Telephone%20Logo.png" alt="Phone Number Icon" title="Phone Number Icon" id="PhoneNumberIcon" />08138549501</div>
</div>
<!--There Should be a separator (vertical)-->
<form action="/" method="post">
    <div class="right">Tell us what you think or feel about this site
        <div id="right-UserComment">
            <input type="text" name="Name" placeholder="Name" required />
            <input type="email" name="Email" placeholder="Email Address" required />
            <br />
            <textarea cols="40" rows="3" wrap="hard" required placeholder="What's up?" name="comments"></textarea>
        </div>
        <button type="submit" value="submit">Send</button>
    </div>
</form>

This is the CSS, it includes the container, left and right div tags css.

container{
    width:950px;
    margin:0;
    margin-left:auto;
    margin-right:auto;
    border-style:solid;
    background-color:orange;
}



.left {
    width:450px;
    margin-left:10px;
}

.right{
    width:390px;
   margin-left:10px;
}

http://jsfiddle.net/isherwood/rXT95/

Answer 1

container{ 
    width:950px; margin:0;
    margin-left:auto; margin-right:auto; border-style:solid;
    background-color:orange; 
} 
.left {
    width:450px; 
    margin-left:10px; 
    float:left;
 } 
 .right{ 
    margin-left:0 auto; 
 }

Updated. http://jsfiddle.net/3VF9Q/

Answer 2

Here is a JS Fiddle with an answer. I am using percentage based widths instead of pixel widths: http://jsfiddle.net/4nHr8/

The CSS is as follows:

.left {
    float:left;
    width: 40%;
    padding: 0 2.5%;
    display:inline-block;
    border-left: 2px solid #333;
}
.right {
    float:left;
    width: 40%;
    padding: 0 2.5%;
    display: inline-block;
}

Answer 3

You just need to float both the elements in question.

You can view it here: http://jsfiddle.net/rXT95/2/

HTML:

<div class="container">
    <div class="left colborder">
        <p>To know what's cooking you can check our <a href="#"> events </a> for more
            <br />For more information Contact Us</p>
        <div class="left-ContactInformation">
            <img src="Picture%20Related/Email%20Logo.png" alt="Email Address Icon" title="Email Address Icon" id="EmailAddressIcon" />j.banti09@gmail.com
            <br />
            <img src="Picture%20Related/Telephone%20Logo.png" alt="Phone Number Icon" title="Phone Number Icon" id="PhoneNumberIcon" />08138549501</div>
    </div>
    <!--There Should be a separator (vertical)-->
    <form action="/" method="post">
        <div class="right">Tell us what you think or feel about this site
            <div id="right-UserComment">
                <input type="text" name="Name" placeholder="Name" required />
                <input type="email" name="Email" placeholder="Email Address" required />
                <br />
                <textarea cols="40" rows="3" wrap="hard" required placeholder="What's up?" name="comments"></textarea>
            </div>
            <button type="submit" value="submit">Send</button>
        </div>
    </form>
</div>

CSS:

.container{
    width:950px;
    margin:0;
    margin-left:auto;
    margin-right:auto;
    border-style:solid;
    background-color:orange;
    overflow: hidden; /* added */
}

.left {
    width:450px;
    margin-left:10px;
    float: left; /* added */
}

.right{
    width:390px;
   margin-left:10px;
    float: left; /* added */
}

Answer 4

Using CSS3 box-sizing: border-box model (IE8+): http://jsfiddle.net/ashjt/3br3a/2/

Using normal CSS: http://jsfiddle.net/ashjt/3br3a/4/

Answer 5

Check following html I added on outer div and added style for div

<br>
<div style='width:100%'>
<div class="left colborder" style='width:50%;float:left'>
<p>To know what's cooking you can check our 
    <a href="#"> events </a>
    for more
    <br />
For more information Contact Us</p>

<div class="left-ContactInformation">
    <img src="Picture%20Related/Email%20Logo.png" alt="Email Address Icon" title="Email Address Icon" id="EmailAddressIcon" />
    j.banti09@gmail.com
    <br /><img src="Picture%20Related/Telephone%20Logo.png" alt="Phone Number Icon" title="Phone Number Icon" id="PhoneNumberIcon" />
08138549501</div>
</div>
<!--There Should be a separator (vertical)-->
<div style='width:50%;float:right'><form action="/" method="post">
<div class="right">Tell us what you think or feel about this site

<div id="right-UserComment"><input type="text" name="Name" placeholder="Name" required />
    <input type="email" name="Email" placeholder="Email Address" required />
    <br />
    <textarea cols="40" rows="3" wrap="hard" required placeholder="What's up?" name="comments">
    </textarea>
</div>
     <button type="submit" value="submit">Send</button></div>
     </form>
     </div>
</div>`