For a listing I work with a list. Each list item holds a article number, a photo, a description, a model list and a price and order button. Right now I have the div holding the price and order button position absolute in the list item. When all other details are filled in this works fine as you can see in this screenshot
However if, for whatever reason, certain things are not filled in. Things get messy as you can see in this screenshot
What would be my best option to accomplish that the price and button ar at the bottom from the list item without having it positioned absolute.
If you are absolutely placing the content at the bottom of that div then you should ensure that you give the div some padding bottom to protect the absolute element that you placed there.
Flexbox can do bottom-alignment in fluid elements assuming you want all elements to be the same (as in two table-rows etc). Of course it all depends on what html you have and what you are really trying to achieve. In your images there looks like there’s no need for absolute elements unless you wanted those divs the same height but still having the order button at the bottom.
Hi gandal458 and PaulOB. Thank you for the replies.
@gandal458 This is a link to that page link For now I took the absolute positioning out on request from the site owner
@PaulOB.Preferably I would like all items in one row to have the same height. Right now I use jquery.matchHeight to accomplish that. But I am open to any other ways to reach where I am after.
As mentioned you could do this automatically with flexbox but that would mean changing the html so that you have the right flex items to use. The simplest solution for now would be to do as I said above and add some padding bottom to the div and then absolutely place the bottom row into position. The padding bottom on the div will ensure that content doesn’t go over the top of the absolute element.
