CODEWITHSUNDEEP
htmlcss
pg.
pg.

Reputation: 2531

Make a link have the same width as the image above it

OK so today my brain is broken I can't figure this basic problem out. I want to have a LINK that goes underneath an image. The images may have different widths, let's say some are 100px wide and some are 200px wide:

<div>     
    <img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;">
    <a href="link.php" style="display: inline-block;background-color:blue">WORDS</a>
</div>

If I set the link's display to inline-block, it only takes up the space it needs to say "words". If I set it to block, the div stretched to accomodate it and it takes up 100% of the available space and is 5x too wide, much wider than the image.

I want the link to take up the whole width of the div, and I want the div to be as wide as the image (plus padding).

If I set the div's width in pixels, it doesn't look right if the image is a different width. What am I missing here?

Upvotes: 1

Views: 1430

Answers (4)

Matthew
Matthew

Reputation: 932

The parent div will automatically be set to display: block which will span the entire length of the page. If you set the parent div to display: inline-block the div will only be as wide as the image. Then you set the link with a width: 100% and this should give you the results you are looking for.

here is a Fiddle for you to see what i mean.

I have updated the fiddle to include 2 different size images. the key is you have to wrap each image and link in a new parent div.

Hope this helps!

*EDIT: If you would like to add a space between the image and the link with padding only give your image the top/bottom padding like so padding: 1em 0; and then add the side padding to the parent div like so padding: 0 1em.

Here is another Fiddle with that implimented.

Upvotes: 3

Vinc
Vinc

Reputation: 406

I suppose u ask something like this... 

<div style="width:100%; max-width:400px;">
    <img src="http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" style="auto;text-align:center;display:block; max-width:400px; width:100%; padding:1em;border: 5px solid #EFEFEF;">
    <a href="link.php" style="display: inline-block; background: blue; width: 100%; padding:0em 1em;border: 5px solid blue;">WORDS</a>
</div>

well as u see i've played with the width in all the elements to achieve it, and cheated on the "a" tags' border-padding. without setting a width on your image and your main div, you cant achieve what u asked unless u use javascript...

Upvotes: 0

www139
www139

Reputation: 5227

Is this what you want? Let me know if I can improve this answer :)

<div>
  <img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;">
  <a href="/link.php" style="display: block;background-color:blue; width:calc(100% - 10px); margin:auto;">WORDS</a>
</div>

Upvotes: 0

Joey
Joey

Reputation: 1370

Set the link style display:block; and maybe give your image a width="100%"

Upvotes: 2

Related Questions