CODEWITHSUNDEEP
htmlcss
Mr. Loop
Mr. Loop

Reputation: 187

text within fixed block element to have scalable length

Here's my jsfiddle

And here's 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

Look through all 4 of the.. The 4th div has a unique class which hardcodes ideal dimension.

Are there any creative solutions to make this work? I want the block a tags to remain the same size.

Upvotes: 0

Views: 138

Answers (5)

rpasianotto
rpasianotto

Reputation: 1413

See that question here, if you want to keep the size that you want and change the size of the text depending on his length.

Upvotes: 0

Dom
Dom

Reputation: 2325

Change the height of your a to either min-height or auto.

Enclose the spans that are inside the a with another span.

Add display:table; to the new span.

Add display:table-cell and vertical-align:center; to the existing a.

Worked when I tried it on your Fiddle, wish I had more time, hope it helps. =)

Upvotes: 0

Captain Skyhawk
Captain Skyhawk

Reputation: 3500

Looks like you want to center vertically in the div.

Here's how you do this:

In css: 

 #floater   {float:left; height:50%; margin-bottom:-55px;}
 #content   {clear:both; height:110px; position:relative;}

In html:

 <div id="floater">
 <div id="content">
    Content here
 </div>
 </div>

Upvotes: 0

Abdul Malik
Abdul Malik

Reputation: 2642

use min-height instead of height

a{min-height:70px;}

Upvotes: 1

Joe
Joe

Reputation: 6416

Remove the height attribute from your a CSS rule.

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/

Upvotes: 0

Related Questions