praszyk praszyk - 5 years ago 144
HTML Question

listing elements from bottom to top (but not in reverse order)

Situation



I have a design where
categories
are displayed on a square
product
.
There can be one
category
or up to 3
categories
.

Problem



The design requires the categories to be listed from the bottom to the top. The categories are displayed as
<div>category-1</div>
text. Each category has a height of
80px
and a custom width (max 200px).

Is it possible to do this with CSS only and for at least IE9?

I can use angular JS if a CSS-only solution is not possible.




At the moment it looks like this when there are 2 categories.

enter image description here

I need to make it look like this:

enter image description here

I could add a margin-top in that case, but as soon as there is only 1 category it looks like this:
enter image description here

It should always be the same space between FOOTER and the last category.

EDIT:

Not sure if it's important but there is a maximum of 3 categories and a minimum of 1 category.

Looks like I wasn't clear enough so I made an example on jsfiddle:

https://jsfiddle.net/k3ve49uj/

The last result is what I need. Even if there is only 1 category, it should stick to the bottom. I used a
to simulate that.

Unfortunately I can't show the actual HTML & CSS because it's work for a client. But I'll be able to apply the changes later on.

Info



Please don't work on the code I provided, it's just to demonstrate what I need. Basically there is a container & all elements inside it have to be positioned from THE BOTTOM to the TOP. Not the other way around.

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>




Answer Source

This will do exactly what you want. But I'm not sure it will go with the CSS you are using without watching it. Try this or provide your CSS for the list and footer if it does not work this way.

#footer {
  margin-top: 20px;
  width: 100%;
  height: auto;
  color: red;
}

ul{
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
  
}
<ul>
  <li>Category 1</li>
  <li>Category 2</li>
</ul>
<div id="footer">Footer</div>

UPDATE

Check this fiddle using your updated code and let me know.

Just need to update your .product .category_wrapper as below

.product .category_wrapper {
            position: absolute;
            right: 20px;
            width: 20%;
            bottom: 60px;
            background-color: rgba(0, 255, 0, 0.3);
            height: auto;
        }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download