How to make float bottom? - html

Question

Demo is like this : https://jsfiddle.net/oscar11/9syLgw9m/3/
My code is like this :
<table border="2" width="650px">
<tr>
<td>
<div style="float:left">
<!-- <p style="text-align:center;"> -->
<img style="width:200px; height:140px; margin:9px;" src="http://img.thesun.co.uk/aidemitlum/archive/02388/Chelsea_Small_2388014a-660.png" />
<!-- </p> -->
</div>
<div style="float:left">
<div class="hotel">Nana hotel</div>
<div class="description">Nana hotel is the best.Nana hotel is the best.Nana hotel is the best.</div>
<div class="price" style="">
<div style="float:left;color:#c80000;font-size:16px;">Price : <b>123</b> / night</div>
<div style="float:right;"><button type="button" class="btn blue more">Detail</button> <button type="button" class="btn blue more">More</button></div>
</div>
</div>
</td>
</tr>
</table>
I want to show class "price" at the very bottom . Actually it can use the margin, but the problem is the class description, class description is the dynamic
How to make class "price" at the very bottom?
Thank you

Answer 1

First, please don't use <table> when you're not using tabular data.
That said, you can add padding-bottom to your .description and set the .price to position: absolute; and position it in the left bottom corner. The padding-bottom is the space that the price comes in, so play around to your needs. See my example below.
table {
position: relative;
}
.description {
padding-bottom: 20px;
}
.price {
position: absolute;
bottom: 0;
left: 0;
}
<table border="2" width="650px">
<tr>
<td>
<div style="float:left">
<!-- <p style="text-align:center;"> -->
<img style="width:200px; height:140px; margin:9px;" src="http://img.thesun.co.uk/aidemitlum/archive/02388/Chelsea_Small_2388014a-660.png" />
<!-- </p> -->
</div>
<div style="float:left">
<div class="hotel">Nana hotel</div>
<div class="description">Nana hotel is the best.Nana hotel is the best.Nana hotel is the best. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, modi ipsum natus provident molestias magni culpa ab cumque, quo, deleniti fugiat adipisci sequi suscipit
porro maiores! Quod quibusdam modi consectetur!</div>
<div class="price" style="">
<div style="float:left;color:#c80000;font-size:16px;">Price : <b>123</b> / night</div>
<div style="float:right;">
<button type="button" class="btn blue more">Detail</button>
<button type="button" class="btn blue more">More</button>
</div>
</div>
</div>
</td>
</tr>
</table>
Edit
Here's a better solution, without using tables. Check out the code below and play around with it to your needs. display: flex; is the way to turn your 'design' easily in to what you want.
Please consider that in the future you need to do your own work. We're not employees ready to do whatever you want.
.description {
padding-bottom: 20px;
}
.container {
width: 650px;
border: 2px solid black;
display: flex;
flex-flow: row wrap;
}
.image {
width: 200px;
flex-basis: 200px;
}
.image img {
width: 200px;
}
.content {
flex-basis: calc(100% - 200px);
padding-left: 10px;
box-sizing: border-box;
}
.info-container {
display: flex;
flex-flow: row-wrap;
justify-content: flex-start;
}
.price {
color: #c80000;
font-size: 16px;
}
.buttons {
margin-left: auto;
}
<div class="container">
<div class="image">
<img src="http://img.thesun.co.uk/aidemitlum/archive/02388/Chelsea_Small_2388014a-660.png" alt="Chelsea" />
</div>
<div class="content">
<div class="title">Nana hotel</div>
<div class="description">Nana hotel is the best.Nana hotel is the best.Nana hotel is the best.</div>
<div class="info-container">
<div class="price">Price : <strong>123</strong> / night</div>
<div class="buttons">
<button type="button" class="btn blue more">Detail</button>
<button type="button" class="btn blue more">More</button>
</div>
</div>
</div>
</div>