Search code examples
cssblock

Nesting blocks? Adding text at the bottom of a block


I need to add a few words at the bottom of a block. .label is the block. Inside is a .label_title, and under that is picture/ link that is a block also. Under the picture/link a need to a brief description, but I want it to stay in the .label block. I tried to use

the .label but it didn’t show. I’m not sure if that’s because of the css or if I can’t nest a block(

) inside of a block(.label) underneath a block (.label_seo1_1). Sorry if this is confusing I don’t know how to put it. Basically I want to add a paragraph on the bottom of the .label block under the .label_seo1_1. I pasted the css code and html that I am currently using.

Attempt at a graphical depiction.

*********.label*********************
*    .label_tile                   *
*   **Link/picture(block**         *  
*   ****************               *
*      ****Want to add text****    *
************************************


 .label {
display: block;
float: left;
width: 160px;
height: 200px;
}

 .label_title {

font-size: 12px;
line-height: 14px;
height: 15px;
text-align: center;
font-weight: bold;
color: #fff;
}


 .label_seo1_1{
width: 150px;
height: 155px;
display: block;
margin: 0 auto;
}

 .label_seo1_1 {
background: url('images/label_seo1_1.png') no-repeat;   
}





 <div class="label">
<div class="label_title">6000 Blog Comments</div>
      <a class="label_seo1_1" href="<?php echo esc_url( home_url( '/6000-blog-           comments/' ) ); ?>"></a>
  </div>

Solution

  • Use vertical align property for .label

    vertical-align:text-bottom;
    

    fiddle