Scenario
In my current project, I am working on a design where the categories are showcased within a square product. The number of categories displayed can range from one to three.
Challenge
The design demands that the categories appear in a bottom-to-top order. Each category is represented as
<div>category-1</div>80px and a customized width (maximum 200px).
Is it feasible to achieve this layout using CSS alone and ensure compatibility with IE9 or higher?
If a CSS-only solution is not viable, I have the option to utilize Angular JS.
Currently, the design looks like this when there are two categories:
https://i.sstatic.net/00TsA.png
I need to transform it to look like this:
https://i.sstatic.net/ApRu9.png
If I add a margin-top in this scenario, it resolves the issue for two categories, but when only one category is present, it appears as shown below: https://i.sstatic.net/oSwRB.png
Consistency in spacing between the FOOTER section and the last category is crucial.
UPDATE:
To clarify, there will always be a minimum of one category and a maximum of three categories.
To illustrate further, I have created an example on jsfiddle:
https://jsfiddle.net/k3ve49uj/
The final result demonstrates the desired outcome. Even if there is only one category, it should align with the bottom, simulated by using a <br/>.
Due to confidentiality reasons, I cannot share the actual HTML & CSS code, as it pertains to a client project. However, I will be able to implement the recommended changes later.
Information
Please do not make alterations to the provided code; it serves only as a reference for understanding the requirement. Essentially, all elements inside a container must be positioned from the BOTTOM to the TOP, not vice versa.
Code Snippet
.pr.product {
width: 380px;
height: 380px;
background-image: url("http://unsplash.it/380/380?random&blur");
margin: 30px;
position: relative;
color: #fff;
text-shadow: 1px 1px 0px rgba(0,0,0,.5);
}
.product .headline {
position: absolute;
left: 20px;
bottom: 60px;
width: 75%;
}
.product .category_wrapper {
position: absolute;
right: 20px;
width: 20%;
bottom: 140px;
background-color: rgba(0, 255, 0, .3);
height: 60px;
top: 255px;
}
.product footer {
text-align: right;
color: red;
font-size: 18px;
text-transform: uppercase;
position: absolute;
bottom: 20px;
right: 20px;
}<body>
<h3>
Looks good, but only if 3 categories are available.
</h3>
<div class="product">
<div class="headline">
<h1>Test headline</h1>
</div>
<div class="category_wrapper">
<div class="category">category-1</div>
<div class="category">category-2</div>
<div class="category">category-3</div>
</div>
<footer>
FOOTER
</footer>
</div>
<hr/>
<h3>
Only 2 categories (they stick to the top)
</h3>
<div class="product">
<div class="headline">
<h1>Test headline</h1>
</div>
<div class="category_wrapper">
<div class="category">category-1</div>
<div class="category">category-2</div>
</div>
<footer>
FOOTER
</footer>
</div>
<hr/>
<h3>
Desired output if only 2 tags
</h3>
<div class="product">
<div class="headline">
<h1>Test headline</h1>
</div>
<div class="category_wrapper">
<br/>
<div class="category">category-1</div>
<div class="category">category-2</div>
</div>
<footer>
FOOTER
</footer>
</div>
</body>