Content confined within a fixed block element designed to be flexible in length

Check out my jsfiddle link

Here is the markup (css in fiddle).

<div class="item">
    <a href="#">
        <span class="title">Short Title </span><br/>
        <span class="date">June 21st, 2013</span>
    </a>
</div>okay, this is good
<br/><br/>
<div class="item">
    <a href="#">
        <span class="title">A title which is medium </span><br/>
        <span class="date">June 21st, 2013</span>
    </a>
</div>still working...
<br/><br/>
<div class="item">
    <a href="#">
        <span class="title">A much longer title than normal to accommodate </span><br/>
        <span class="date">June 21st, 2013</span>
    </a>
</div>yikes, it's being pushed down
<br/><br/>
<div class="item-ideal">
    <a href="#">
        <span class="title">A much longer title than normal to accommodate </span><br/>
        <span class="date">June 21st, 2013</span>
    </a>
</div>how I want it to look in this case

Review all 4 of the.. The fourth div has a unique class that specifies ideal dimensions.

Do you have any innovative ideas to solve this? I want the block a tags to remain the same size.

htmlcss

Answer №1

Consider using min-height in place of height

a{min-height:70px;}

Answer №2

Eliminate the height property from the a CSS declaration.

a {
  display: block;
  width: 200px;
  /* height: 70px; */
  padding: 20px;
  background: black;
  box-shadow: 0px 0px 15px 0px black;
  text-align: center;
  text-decoration:none;
}

http://jsfiddle.net/AsanM/1/

Answer №3

It seems like you're aiming to vertically center content within a div.

Follow these steps to achieve this:

Using CSS:

#center {display:flex; justify-content:center; align-items:center; height: 100vh;}

In your HTML:

<div id="center">
    Your content here
</div>

Answer №4

Modify the height attribute of your a element to either min-height or auto.

Wrap the span tags that are within the a element with an additional span element.

Include display:table; in the new span.

Apply display:table-cell and vertical-align:center; to the current a element.

Successfully tested on your Fiddle, would have liked more time to delve deeper. Hope this solution is helpful! =)

Answer №5

To find out how to maintain a specific size for your text while adjusting its size based on length, take a look at this related query on Stack Overflow.

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

Achieving Perfect Table Alignment with Bootstrap Framework

I have updated my static website to include a payment gateway with a custom Paypal button. However, I am facing an issue where the table containing the button is not aligning center on the support page like the rest of the content. Here's a snippet of ...

htmlbootstrap-4alignmenttext-align

conceal the mustard-colored dots within the overlay

Whenever I trigger the link, a modal window pops up, but it comes with an unwanted black background color and yellow dots. How can I prevent the yellow dots from showing up on the overlay? http://jsfiddle.net/y88WX/18/embedded/result/ <nav class="da-d ...

javascriptjqueryhtmlcss

The querySelector function is now encountering errors due to a change in the data

Currently, I am utilizing a query selector to retrieve an input when a user selects different buttons. Initially, the buttons had options such as: 8x10 inch 12x16 inch 20x24 inch However, I made changes to the options format like so: 8" x 10" ...

javascripthtml

Whenever I include an onClick event to a div element, the entire webpage fails to display

Currently taking on the task of developing a seat booking website. I am encountering an issue with adding an event listener to a particular div element, which should trigger a function to store the value of the div. However, upon implementing the onClick e ...

javascripthtmlreactjs

Using Jquery to target all elements except for their child elements

I have the following code: <div id="mn"> <span></span> <span> <span></span></span> <span></span> <span> <span></span></span> <span></span> </div& ...

javascriptjqueryhtml

Examining the scroll-down feature button

I'm currently experimenting with a scroll down button on my website and I'm perplexed as to why it's not functioning properly. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" c ...

javascripthtmlcss

What is the best way to navigate through a complex array in React that includes objects and nested arrays?

I have been working on a JavaScript array that includes subobjects with arrays nested in them. My goal is to iterate through the entire parent object using React. Although I attempted the following approach, unfortunately it did not yield the desired outco ...

javascripthtmlarraysreactjsjson

Explore various SVG paths by hovering to reveal or conceal different divs

Hi there, I'll do my best to explain clearly. If this question has already been asked, I apologize as I couldn't find an answer when searching. I've used SVG to create a map on my HTML webpage and it's looking great. I also have hidden ...

javascriptjqueryhtmlcsssvg

Tips to enhance web page loading speed when parsing JSON data from a URL

While extracting data from a JSON file accessed via URL, I am experiencing long loading times. Surprisingly, the website manages to display the same data only when it's ready, and I aspire to achieve a similar functionality. I have yet to discover a ...

phphtmljson

The justify-content-sm-center behavior in Bootstrap seems to be malfunctioning

I am facing an issue with justify-content-sm-center in Bootstrap 5. It is not functioning as intended when trying to center a specific div on smaller screens (below 578px). I have applied the justify-content-sm-center class to the div, but it does not work ...

cssbootstrap-5

What could be the reason for the page scrolling upwards when clicking on href="#"?

I am encountering an issue with a hyperlink <a href="#" id="someID">Link</a> that is located further down the page. This link is used to trigger an Ajax request, but whenever it is clicked, the page automatically scrolls back to the top. I have ...

javascripthtmlajax

Enhance the appearance of React.Fragment with custom styling

When working with React, my components adhere to a specific file structure schema: - componentName |- componentName.tsx |- componentName.scss Some of these components are wrapped with a <React.Fragment>, like this: render() { return ( &l ...

javascriptcssreactjs

Using Stylus and Nib CSS in a secure Node/Express application is causing Chrome to flag insecure JavaScript warnings

System notifications: The website at [...] encountered insecure content from http://fonts.googleapis.com/css?family=Quicksand. as well as The site at [...] showed insecure content from http://themes.googleusercontent.com/static/fonts/quicksand/v2/sKd0EM ...

cssexpressstylus

photos arranged in rows rather than a single row

Looking for help with arranging the remaining photos in the second row? Check out this example image link. I'm struggling to organize a row of overflow images within the "small-img-row" division. This row is located under the main image in col-2. H ...

htmlcssflexbox

Using the on-change event with a textfield can help ensure that the field is cleared if the min-date condition is not met

I recently encountered an issue with an input field that had the type "datetime" and a min-date condition set to today's date. The flow was such that if a valid date was entered, the submit button would be enabled, otherwise it would remain disabled. ...

javascriptangularjshtmlmeteor

Utilize Bootstrap 4 to extend an element within a container column all the way to the edge of the viewport

Is there a way to make a div inside a column extend to the edge of the viewport without using a fluid container? The "extended block" must remain in the markup due to CMS limitations. Any suggestions? https://i.sstatic.net/vishD.png https://codepen.io/mw ...

cssbootstrap-4

Populate a Dropdown Menu with Directory Content for User Selection of d3.js JSON Data

I have a d3 forced-directed graph that is currently using a static JSON file for data: d3.json("../Data/sample.json", function(error, graph) { //do stuff }); However, I would like to give the user the ability to select the data file from a drop-down ...

javascriptphphtmljsond3.js

Evaluating the layout of a webpage with each new code update

I'm currently in search of a testing framework to evaluate the frontend and design aspects of my application. We are developing an Angular application and utilizing Protractor for end-to-end tests, but I am curious about how to test the visual design ...

cssangularjstesting

What is the process for installing and utilizing the custom CSSLint rules that I have developed for the command line interface?

After investing a significant amount of time into following the instructions outlined here and here for creating custom CSS linting rules using CSSLint via the CLI, I have successfully generated and tested my own set of rules. However, I am now facing the ...

cssnpminstallationlintcsslint

Is the space-between property not delivering the desired spacing?

I am trying to achieve equal spacing between list items, and I attempted the following code. ul { list-style-type: none; display: flex; justify-content: space-between; } However, it seems that this approach is not working as expected. I am confused ...

htmlcssflexbox