CODEWITHSUNDEEP
htmlcss
Ren
Ren

Reputation: 4680

Making anchor (button) fit the same height as the text next to it

Disclaimer: I have seen similar posts, but not one quite like mine, hence why I am posting now.

At the moment I have the following:

<div class="textwidget">
<p style="width: 69%;">
Yo, I'll tell you what I want, what I really really want, 
So tell me what you want, what you really really want, 
I'll tell you what I want, what I really really want, 
So tell me what you want, what you really really want, 
I wanna, I wanna, I wanna, I wanna, I wanna really really really wanna zigazig ha. 
If you want my future forget my past, 
If you wanna get with me better make it fast, 
Now don't go wasting my precious time, 
Get your act together we could be just fine 
I'll tell you what I want, what I really really want, 
So tell me what you want, what you really really want, 
I wanna, I wanna, I wanna, I wanna, I wanna really really really wanna zigazig ha. 
</p>
<a class="button overlay-btn" href="http://www.google.com" >A link</a></div>

With the following CSS:

.button, button, input[type="submit"] {
  background-color: #ff6600;
  font-family: "futura-pt";
  font-size: 30px;
  margin: 0;
  text-transform: lowercase;
}
.overlay-btn {
  position: absolute;
  width: 30%;
  right: 0;
  top: 0;
}

I essentially want/need the button height to extend all the way down to the same bottom as the last line of the text.

Is there a reasonable way to achieve this? As always the simpler the better. I would really appreciate the help, since as a CSS beginner, I've been trying all day with no success.

Upvotes: 0

Views: 58

Answers (1)

Cheslab
Cheslab

Reputation: 1924

Here's display: table solution - JSFiddle

.button, button, input[type="submit"] {
  background-color: #ff6600;
  font-family: "futura-pt";
  font-size: 30px;
  margin: 0;
  text-transform: lowercase;
}
.textwidget {
  display: table;
}
.textwidget p {
  display: table-cell;
  width: 70%;
}
.overlay-btn {
  display: table-cell;
  width: 30%;
}

And you don't need this style="width: 69%;" in HTML. Also you can use vertical-align: middle with display: table-cell, so try to combine it with text-align: center.

UPD: http://jsfiddle.net/4wbkL9ow/1/ - it looks pretty nice I think.

Upvotes: 2

Related Questions