Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while keeping it within the .label block. I attempted to use

within the .label but it didn't display as expected. Unsure if this is due to CSS constraints or nesting limitations of blocks (.label) under another block (.label_seo1_1). Apologies for any confusion in explanation; struggling to articulate correctly. Essentially, aiming to insert a paragraph at the bottom of the .label block underneath .label_seo1_1. Sharing the current HTML and CSS code below.

A visual representation of the structure:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a div with a link button when hovering over an image

Currently, I'm attempting to display a link button within a div that will redirect the user to a specified link upon clicking. Unfortunately, my current implementation is not functioning as expected. I have provided the code below for reference - plea ...

Adjustable width for flexbox column

Is there a way to adjust the width of the first flex column so that it only takes up the space of its content? .flex { display: flex; } .inside { flex: 1; border: 1px solid #000; } <div class="flex"> <div class="inside inside-left"& ...

Apply CSS styling to the entire element when hovering over its pseudo-element 'after'

I am working on a button/speech bubble design with a unique hover effect. Here is the current setup: https://i.stack.imgur.com/4OrpL.png Here is the code snippet for the button: <div value="GO" id="go-div" class="bubble"> <input type="submit ...

Looking for a full-page banner within the Genesis Wordpress framework?

I am currently working on a website utilizing the Genesis framework for WordPress. My main goal is to create a straightforward, full-width responsive layered banner. However, I have encountered an issue where this design is always confined within the cont ...

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

I recently incorporated a brief jQuery tooltip plugin into my site. It consists of approximately ten lines of code and works smoothly, as demonstrated in this demo. However, I encountered an issue when attempting to add new text that should also trigger t ...

How can I change the background color of my notification box to red if the count is not equal to zero?

When the count equals 0, I don't want any effect on the notification box. However, when the count is not equal to zero, I want the notification box to turn red. I tried implementing this, but it's not working as expected. By not working, I mean n ...

Applying toggle() using css to manipulate various elements at once

Is there a way to toggle multiple divs of varying heights, all with the same class? What is the most effective approach to achieve this? http://jsfiddle.net/hS6RH/41/ $('.smallify').on('click', function() { if ($(this).parent(&apo ...

Ways to adjust a column width to be equal to the full width

My HTML table has columns with fixed widths, except for one that I want to expand to fill the remaining space with a minimum width set. I attempted using width: auto, but it didn't achieve the desired result of filling the leftover space. ...

Using the linear-gradient method in CSS for border images

I managed to successfully create a design using the CSS properties border-image and linear-gradient. However, I am struggling to understand the syntax involved. While I grasp the concept that the series of colors defines the gradient transition, as well as ...

Positioning icon/image beside the input box

Currently, I have a form with two buttons in a row and an icon (paper clip) that I am attempting to align next to the buttons using UIKit. However, I am facing challenges in getting the alignment right without affecting the size of the elements. Below is a ...

Enhancing Hover Effects in CSS with Additional Backgrounds

How can I create a div that changes its background to black with 50% opacity when hovered over, on top of an existing background image? Thank you! ...

Is there a way I can ensure that two elements have identical heights?

Is there a way to ensure that two different elements in HTML are always the same height using CSS? I attempted to achieve this by setting each element to 50vh in the CSS, but it didn't work. codepen: https://codepen.io/ichfickedeinemutterdudummerwich ...

Create a layout with three columns, each containing four list items

My unordered list (ul) has 4 li's and I'm trying to create 3 columns. However, when I have 4 li's, it only displays as 2 columns. How can I achieve a layout with 3 columns and 4 li's? Additionally, I want the li elements to be arranged ...

Place an IconButton component next to each Material UI TableRow

I am trying to include an icon next to the material UI table row component. Similar to the hint icon shown in the screenshot below Here is my attempt so far, but it's not functioning as expected: Check out the code on CodeSandbox https://i.stack.i ...

Hovering over a class list will modify various element IDs

Is there a way to change the height of an element with id = "header_nav" when hovering over the class "header_nav" li element? Here is the HTML Code: <div class="header_nav" id="header_nav"> <ul id="header_nav_mainmenu"> & ...

Images positioned next to each other appear distorted when adjusting for different screen sizes

I have been struggling with this issue for quite some time and I just can't seem to get it right. My goal is to display two images side by side with a gap between them. The problem arises when the browser is resized, as the gap disappears and the im ...

Focusing on the alignment of an article tag

I am currently facing a challenge in centering the content within an HTML article element. As of now, the content is aligned to the left margin of the page. Below is the snippet of HTML I am working with: <article> <h1>Sign In</h1> ...

The CSS theme fails to adapt to changes made using jQuery

I encountered a peculiar problem while using a CSS theme with jQuery. After applying a custom CSS theme to a webpage, everything looked fine. However, when I performed certain operations using jQuery - like checking checkboxes causing others to be checked ...

unique navbar color transition effect specifically for the homepage

I have successfully created a function called changeColour in my code that changes the color of the navbar when scrolling past a certain point. However, I am encountering an issue where I only want this effect to be applied on the Home page. I would like a ...

Make sure that the two rows in my Bootstrap table are consistently positioned next to each other, regardless of the length of the text

When working with a Bootstrap panel containing text inside a table, I've encountered a challenge. One side features links while the other displays descriptions. At times, I find myself having to artificially lengthen the text to ensure it aligns corre ...