CODEWITHSUNDEEP
htmlcss
ovidiuav
ovidiuav

Reputation: 39

Two blocks of content side by side

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!

Upvotes: 0

Views: 298

Answers (4)

Falguni Prajapati
Falguni Prajapati

Reputation: 129

enter image description here 

        #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;
       }

Upvotes: 0

Nick De Jaeger
Nick De Jaeger

Reputation: 1249

.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>

Upvotes: 1

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

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

Upvotes: 0

Jo&#227;o Deroldo
Jo&#227;o Deroldo

Reputation: 465

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.

Upvotes: 0

Related Questions