Divs aren't lining up.

• 

  ifdc1974 · Member · Sep 4, 2014 at 9:18 pm

  • Copy link
  • Add topic to favorites

  Hello,

  My divs aren’t lining up after I added a link to them. Can you please assist. I want the three boxes to top-align.

  The page is http://ifdcorg.wordpress.com/benin/

  Here is my code:

  `<div class=”parentContainer”>

  <article class=”projects text-left services-inner-content grey-bg text-center equal-height-three”>
  <div id=”img-responsive”><img class=”projectimg” src=”http://ifdcorg.files.wordpress.com/2014/07/2scale_project_new.png” alt=”” /></div>
  <h3 class=”dark”>2SCALE</h3>
  <h5>Improving the livelihoods of 12 African countries.</h5>
  </article>

  <article class=”projects text-left services-inner-content dark-low-bg text-center equal-height-three”>
  <div id=”img-responsive”><img class=”projectimg” src=”https://ifdcorg.files.wordpress.com/2014/07/prime_project_new.png” alt=”” /></div>
  <h3 class=”dark”>PRIME</h3>
  <h5>Improving the production and supply of rice in the 15 ECOWAS countries of West Africa.</h5>
  </article>

  <article class=”projects text-left services-inner-content grey-bg text-center equal-height-three”>
  <div id=”img-responsive”><img class=”projectimg” src=”https://ifdcorg.files.wordpress.com/2014/07/wacpp_project.png” alt=”” /></div>
  <h3 class=”dark”>USAID WACPP</h3>
  <h5>Increasing food security in Benin, Burkina Faso, Chad and Mali.</h5>
  </article>
  </div>

  Here is my CSS:

  }

  .parentContainer {
  overflow: auto;
  width: 900px;
  margin: 0 auto;
  }

  article {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: none;
  }

  article.projects {
  float: left;
  height: 425px;
  width: 33%;
  padding: 15px;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  senff · Staff · Sep 5, 2014 at 2:38 am

  • Copy link

  Your HTML is a little bit messed up. If you look in the source of your page, you’ll see that the closing /A tags for each article are wrapped in P tags — this probably happened because you hit ENTER before and after the /A tags. So what you might see in your content (Visual mode):

  <a href=".....">
  <article>
  ......
  </article>
  
  </a>

  But try fixing it like this:

  <a href="..."><article>
  ......
  </article></a>

  Don’t use any ENTERs between the A tags and ARTICLE tags.

• 

  ifdc1974 · Member · Sep 8, 2014 at 1:28 pm

  • Copy link

  Thanks. It looks to be fixed now.

• 

  ifdc1974 · Member · Sep 8, 2014 at 6:05 pm

  • Copy link

  I can get them lined up without <p> tags but then it removes my link???

• 

  ifdc1974 · Member · Sep 8, 2014 at 6:10 pm

  • Copy link

  Ok. I think I have a fix for now. I just can’t link the entire box without it messing up.