Vertically aligning objects to bottom and making them responsive in css
Hi,
I have this css that I need some help with. The output should be like in this image:
I have started to do and got most of the things to work, but there are two things I don't get to work:
The price and the buy button should always be vertically aligned to the bottom of the div wrapping them and the text.
The whole set should be responsive so that its width and height adjusts when the resolution changes (right know the resolution is set for 1280px, but the height and width of the product image, text, price and button need to shrink a litte for tablets and such devices and I'm not sure how to dynamically adjust that).
This is the css and html I'm using:
I've seen in some cases that javascript is used for these scenarios also, but a not sure how to use it.
Greatful for help for the smartest and easiest way to solve this problem.
Peter
I have this css that I need some help with. The output should be like in this image:
I have started to do and got most of the things to work, but there are two things I don't get to work:
The price and the buy button should always be vertically aligned to the bottom of the div wrapping them and the text.
The whole set should be responsive so that its width and height adjusts when the resolution changes (right know the resolution is set for 1280px, but the height and width of the product image, text, price and button need to shrink a litte for tablets and such devices and I'm not sure how to dynamically adjust that).
This is the css and html I'm using:
.listings {
padding: 0px 0;
width:100%;
clear:both;
}
.listings ul.properties_list {
list-style: none;
overflow: hidden;
}
.listings ul.properties_list li {
display: block;
/*width: 30.90909090909091%;*/
width: 10.15625%;
height: auto;
position: relative;
float: left;
/*margin: 0 3.636363636363636% 3.636363636363636% 0;*/
margin: 10px 20px 0px;
vertical-align:bottom;
/*background-color:yellow;*/
}
.listings ul.properties_list li .imageBlock{
height:213px;
background-color:green;
vertical-align: bottom;
display:table-cell;
}
.listings ul.properties_list li img {
width: 100%;
height: auto !important;
}
.listings ul li .property_details{
width: 100%;
padding:0;
height:120px;
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
color:#000;
background-color:red;
}
.listings ul li .property_details h1 {
font-size:0.9em;
color:#4aa7de;
font-weight:700;
}
.listings ul li .property_details h2 {
font-size:0.7em;
}
.listings ul li .property_details .buyDetails{
height:50px;
vertical-align:bottom;
display:table-cell;
}
.listings ul li .property_details .price {
color:#e73b2d;
font-size:15pt;
vertical-align:bottom;
text-align:center;
}
.listings ul li .property_details .buyarea {
vertical-align:bottom;
text-align:center;
}
a.buy{
background: #4aa7de;
background-image: -webkit-linear-gradient(top, #4aa7de, #4a98de);
background-image: -moz-linear-gradient(top, #4aa7de, #4a98de);
background-image: -ms-linear-gradient(top, #4aa7de, #4a98de);
background-image: -o-linear-gradient(top, #4aa7de, #4a98de);
background-image: linear-gradient(to bottom, #4aa7de, #4a98de);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
/*font-family: Arial;*/
color: #454445;
font-size: 13px;
padding: 10px 20px 10px 20px;
text-decoration: none;
float:left;
margin-left:30px;
margin-top:6px;
cursor:pointer;
color:#fff;
}
h1 {
margin:0;
font-family: 'Open Sans', Verdana, sans-serif;
font-weight:normal;
font-size:16pt;
}
h1 + p {
margin:0;
}
h2 {
margin:0;
font-family: 'Open Sans', Verdana, sans-serif;
font-weight:normal;
font-size:14pt;
}
h2 + p {
margin:0;
}
<section class="listings">
<div class="wrapper">
<ul class="properties_list">
<li>
<div class="imageBlock">
<img src="ProductImage/bok1.png" />
</div>
<div class="property_details">
<h1>
Är påven svaret?
</h1>
<h2>
Tomas Dixon
</h2>
<div class="buyDetails">
<div class="price">
169 kr<br />
<%-- <asp:LinkButton ID="LinkButton1" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>--%>
</div>
<div class="buyarea>">
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>
</div>
</div>
</div>
</li>
<li>
<div class="property_img">
<img src="ProductImage/bok2.png" />
</div>
<div class="property_details">
<h1>
Är påven svaret?
</h1>
<h2>
Tomas Dixon
</h2>
<div class="price">
169 kr<br />
<%-- <asp:LinkButton ID="LinkButton1" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>--%>
</div>
<div class="buyarea>">
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>
</div>
</div>
</li>
<li>
<div class="property_img">
<img src="ProductImage/bok3.png" />
</div>
<div class="property_details">
<h1>
Är påven svaret?
</h1>
<h2>
Tomas Dixon
</h2>
<div class="price">
169 kr<br />
<%-- <asp:LinkButton ID="LinkButton1" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>--%>
</div>
<div class="buyarea>">
<asp:LinkButton ID="LinkButton3" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>
</div>
</div>
</li>
</ul>
</div>
</section>
I've seen in some cases that javascript is used for these scenarios also, but a not sure how to use it.
Greatful for help for the smartest and easiest way to solve this problem.
Peter
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASP.NET
The successor to Active Server Pages, ASP.NET websites utilize the .NET framework to produce dynamic, data and content-driven web applications and services. ASP.NET code can be written using any .NET supported language. As of 2009, ASP.NET can also apply the Model-View-Controller (MVC) pattern to web applications
128K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
If you require column and row display, and you need horizontal alignment for rows, it is difficult for me to get that unless I use a <table> , If I use <div> or <li> column structures, then they do not coordinate any horizontal row correspondence that I know of.
Below is code I did, that uses a <table> for row and column display, and always lines up the "price and buy button" horiz in each product column.
Open in new window
You use some "Widths" like
width: 10.15625%;
that make no sense to me, I gave my table a width of -
#prop_list {width:50%; max-width:1240px;}
just for development, but I had no web page to see what the actual width settings should be?
This works as far as I can tell, I did not set a minimum width for #prop_list , but that would depend on the width of container of the <table> .
ask questions if you have problems.