• Hi there,

    I am using a plugin called Views (by Toolset) which outputs a loop of my posts. It’s not PHP, but hopefully it’s pretty much teh same if you imagine it in PHP. Here is my code, which inlcudes some of the plugin-specific markup:

    <div id="featureBox">
    	<!-- wpv-loop-start -->
    		<wpv-loop>
    
              <div class="homeFeature">
               <a href="[wpv-post-url]">
                <h1>[wpv-post-title]</h1>
                <p>[wpv-post-excerpt length="80"]</p>
    
                </a>
              </div>
    
    		</wpv-loop>
    	<!-- wpv-loop-end -->
    
    </div>

    and here is my CSS:

    #featureBox {
      margin:0;
      padding:0;
      display:table;
    }
    
    .homeFeature {
      display:block;
      width:33.33333%;
      padding:45px 20px;
      float:left;
      text-align:center;
       text-align: center;
      vertical-align:middle;
      height:100%;
    }
    
    #featureBox div:nth-child(1), #featureBox div:nth-child(2),#featureBox div:nth-child(3) {
      border-bottom:1px solid #C5CDE3;
    }
    
    #featureBox div:nth-child(2), #featureBox div:nth-child(5){
      border-left:1px solid #C5CDE3;
      border-right:1px solid #C5CDE3;
    }
    
    .homeFeature h1 {
        font-family: 'Alegreya', serif;
    	color:#473564;
    	font-weight:400;
        font-size:2em;
      margin:0 0 20px 0;
      line-height:100%;
    }
    
    .homeFeature p {
      margin:0;
      font-size:0.9em;
    }
    
    .homeFeature a {
    display:block;
    }
    
    .homeFeature a:hover {
      background-color:#FCD072;
    }

    I am having several issues:

    MAINLY 1) the divs do not stay the same height, the way i would imagine they woudl be forced to if using this table/table-cell display css. Obviously when an H! tag takes up more than one line because the text is long, it makes the div unequal size. I want them to stay all the same size. Is this possible? What i am trying to achieve is basically the way you see the blog posts displayed on this theme here: http://my.studiopress.com/themes/whitespace/#demo-full

    2) and secondly, although this is another topic, the a:link doesn’t expand to fill the div. It seems to fall short of teh padding. Is this normal behavior? (this is not teh most important part of my question, since i know it may require a separate post.)

    Thanks in advance of anyone who can help me achieve this layout using divs where they all stay the save height.

The topic ‘Help acheiving equal height divs in a loop, using display:table’ is closed to new replies.