Home/ Questions/Q 9035441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T08:45:36+00:00

I want to get this when resizing the browser window: And I have this

  • 0

I want to get this when resizing the browser window:

enter image description here

And I have this HTML:

<a class="article-link-block" href="#">
<img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
<div class="article-info">
    Article Info need to be 20% of the height and always at the bottom
</div>
</a>

I can get everything but not the 20% of the height for article info.

I can only make it e.g. 50px height and then margin-top: -50px and it is ok, for maximum width. but when I start decreasing the width of the browser it doesn’t change the height only the width, which is 100%.

Any advice/techique how can I dynamically resize height and stay at the bottom all the time?

If I use margin-top: -20%; height: 20%; for .article-info

it creates something like that:

enter image description here
But this is wrong, of course.

Btw. CSS is 

.article-link-block {
    display: block;
    float: left;
    width: 100%;
    position: relative;
    height: auto;
}

.article-link-block img {
margin: 0px;
padding: 0px;
display: block;
float: left;
}

.article-info {
    background: black;
    width: 100%;
    height: auto;
    float: left;
    position: relative;
    display: block;

        margin-top: -20%;
    height: 20%;

}

EDIT EDIT EDIT

<body>

    <div id="header">
        <!-- header is 100% width of body width-->
    </div>

    <div id="content">
        <!-- container is 100% of body width -->

        <div id="articles"> 

                <!-- articles are 70% of container width-->

                <a class="article-link-block article-1" href="#">
                <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
                <div class="article-info">
                    Article Info need to be 20% of the height and always at the bottom
                </div>
                </a>

                <a class="article-link-block article-2" href="#">
                <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
                <div class="article-info">
                    Article Info need to be 20% of the height and always at the bottom
                </div>
                </a>

                <a class="article-link-block article-3" href="#">
                <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
                <div class="article-info">
                    Article Info need to be 20% of the height and always at the bottom
                </div>
                </a>

                <a class="article-link-block article-4" href="#">
                <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
                <div class="article-info">
                    Article Info need to be 20% of the height and always at the bottom
                </div>
                </a>

        </div>

        <div id="sidebar">
                <!-- sidebar is 30% of container width -->
        </div>

    </div>

    <div id="footer">
        <!-- footer is 100% of body width -->
    </div>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Although I believe wrapping a block-element in an <a> is HTML5 compliant, it’s not necessary.

    CSS

    a { position:relative; outline:1px dashed red; display:inline-block; width:100% }

span {
    position:absolute;
    bottom:0;
    height:20%;
    padding:5px;
    background-color:#ccc;
    width:100%
}

img { width:100% }

    HTML

    <p style="background-color:black"><!-- remove inline style in production code -->
    <a href="#" class="article-link-block">
        <img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
        <span>Article Info need to be 20% of the height and always at the bottom</span>
    </a>
</p>

    Fiddle:   http://jsfiddle.net/9dt7w/

    EDIT (one picture with multiple articles). Instead of using a <span> use a list.

    <img>
<ul>
  <li>article</li>
  <li>article2</li>
</ul>

    Fiddle for that one: http://jsfiddle.net/vtZ8g/

    EDIT – Accepted Answer
    http://jsfiddle.net/MXXaS/

    • 0