Trying to clean up a site where someone used a "page builder" plugin in addition to the existing theme. On the page below, I removed all plugin code, but... The text below "Next Steps" does not top align with the "Free" button to the right. I tried using the float method and even making the divs display as table cells. It would work in a temporary test environment but not once I pasted it into this site. Example page

  • You could give the free consultation button display: inline-block;. Please note that CSS questions are out of scope here on WPSE, so this question will probably be closed. – Dave Romsey Jun 12 '17 at 20:56
  • @DaveRomsey I put this under WordPress because I presently suspect the WP method of using CSS may be part of my problem. But may be closed anyway: sigh. Thx. – Luke 5 Dev Jun 12 '17 at 21:23

Slowed down the pace of edits and thought it through ... working now! The padding-top compensates for a tendency of the button to sit too high.

.alignleft-luke5 { width:70%; height:200px; float: left; } .alignright-luke5 { width:30%; height:200px; float: left; padding-top:0.8em; }

| improve this answer | |

This is more a pure CSS question than a WordPress question, but...

You'll need to use display:block rather than inline, so you can add a margin; and you're having issues with the float because the "alignleft" div has a 60% width plus a 1.5em right margin, so adding 60% + 40% + 1.5em = more than 100%.

The Free Consultation div needs (on desktop view)

margin-top:1em; // tweak this to control the vertical position
width:30%; // also tweak

It would be better to tweak the margin on the "alignleft" div to use a %, so you could calculate an exact % to use as the width for the "free consultation" div.

Also bear in mind you need to solve for smaller screens. Even the current 60%/40% breaks the "free consultation" button on mobile.

If it were me, I'd create a brand-new-from-scratch site, apply their theme with whatever customizations they've chosen, then input the content manually (i.e. don't export/import, actually copy and paste paragraph by paragraph) so you have a clean site.

| improve this answer | |
  • I made those changes and pushed all CSS into the style sheet. The DIVs are no longer side-by-side? – Luke 5 Dev Jun 12 '17 at 21:15
  • My DIV CSS for this: alignleft-luke5 { float:left; width:60%; } alignright-luke5 { display:block; float:left; margin-top:1em; /*tweak for vert*/ width:30%; /*tweak*/ } – Luke 5 Dev Jun 12 '17 at 21:16

Put the inside the div with the text

<div class="alignleft" style="width:60%;">
<h3>Next Steps...</h3>
Please feel free to contact us for a free consultation today. We will analyze
your current online presence and let you know how we can help you with your 
business goals. Contact us today to set up your free consultation!
<div style="display:inline;width:40%;"><a 
href="http://luke5marketing.com/contact/" class="button-luke5">Free
| improve this answer | |
  • I havn't tried that because my manager's expectation is button will align with para. Thx anyway. – Luke 5 Dev Jun 12 '17 at 21:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.