Two blocks of content side by side

Question

I want to write some content on a website and put a form right next to it like in the example below.

Example

This is the code I'm using:

<div id="wrapper">
<div id="block1">
<h3>Your body is a temple.</h3>

Schedule an appointment now and start living a better life.
You deserve it.
</div>

<div id="block2">
<em>*Please include correct contact information so we can get back to you.</em>
[contact-form-7 id="28921" title="Make an appointment"]
</div>
</div>

CSS:

#wrapper {
    width:1000px;
}
#block1 {
    float: left;
    width:500px;
}
#block2 {
    float: left;
    width:500px;
}

Unfortunately it doesn't display right:

PIC

I've tried several other ways found here on stackoverflow but I just can't seem to get it working. This is the live site in case it helps: orlandochiropractic.org. You have to go to the strip that says "NEED HELP?" and click on the "MAKE AN APPOINTMENT" button.

Any help would be greatly appreciated. Thank you!

Answer 1

 .wrapper { display: flex; flex-direction: row; align-items: center; justify-content: center; } .block { flex: 1; padding: 20px; } 

 <div class="wrapper"> <div class="block"> <h3>Your body is a temple.</h3> <p>Schedule an appointment now and start living a better life. You deserve it.</p> </div> <div class="block"> <em>*Please include correct contact information so we can get back to you.</em> <div>[contact-form-7 id="28921" title="Make an appointment"]</div> </div> </div> 

Answer 2

        #wrapper {
           padding: 20px;
            float: left;
            width: 100%;
        }
        .paoc-popup-modal-cnt{
           padding: 0;
        }
         #block1 {
            float: left;
            width: 50%;
        }
        #block2 {
            float: left;
            width: 50%;
       }
       div.wpcf7 {
        margin-left: 0;
       }

Answer 3

It appears your problem is on the wordpress form class, look at this element:

<div role="form" class="wpcf7" id="wpcf7-f28921-p28210-o1" lang="en-US" dir="ltr">

Look at this style, it have a margin-left set, just overide it with this:

div.wpcf7{
   margin-left: 0; //If necessary use !important
}

Then i moddified a bit your code to fit the element view, here's follow the code:

#wrapper:after{
   content: "";
   display: table;
   clear: both;
}

#block1{
   float: left;
   width: 480px; //Removed 20px beacause you have a padding on the father's div
}

#block2{
   float: left;
   width: 480px; //Same as block1
}

Hope it helps your problem.

Answer 4

You need to change this css

div.wpcf7 {
    margin-left: 0;
}
#wrapper {
    width: 960px;
}
#block1,#block2 {
    float: left;
    width: 480px;
}
.clearfix{
    clear:both;
}

and add

div <div class="clearfix"></div> below block2