Min-height is not working in this block

HTML & CSS
1

Hi there

this is My JSfiddle

I am trying to give equal height t both block one is productDataBlock and other is productImageBlock
but as you can see productImageBlock is not getting equal height as productDataBlock

Where is error?

2

Hi,

The code is littered with errors and misinformed choices :smile:

There is no point in saying:height:100 and min-height:100% because all you get is height:100% (assuming there is a parent to base its height on anyway; which is not the case so simply remove them all as they do nothing in this case).

You then correctly set the elements to display:table-cell but then break the layout by changing them to floats in the next rule which kills the table-cell effect.

Remove the floats, set vertical-align:top to the table-cell and remove the 70% width as only one cell needs the width.

Here is the revised code for you to study:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.productDetail {
	display: table;
	width: 100%;
}
.productDataBlock, .productImageBlock {
	display: table-cell;
	vertical-align:top;
}
.productDataBlock{
	background-color: green;
}
.productImageBlock{
	background-color: lime;
	width: 30%;
	padding-top: 40px;
}
</style>
</head>

<body>
<div class='productDetail'>
		<table class="productDataBlock">
				<tr>
						<td>Product Id</td>
						<td class="productId"></td>
				</tr>
				<tr>
						<td>Product Category</td>
						<td class="productCategory"></td>
				</tr>
				<tr>
						<td>Product Name</td>
						<td class="productName"></td>
				</tr>
				<tr>
						<td>Product Quantity</td>
						<td class="productQuantity"></td>
				</tr>
				<tr>
						<td>Product Description</td>
						<td class="productDescription"></td>
				</tr>
				<tr>
						<td>Product Rating</td>
						<td class="productRating"></td>
				</tr>
				<tr>
						<td>Product Price</td>
						<td class="productPrice"></td>
				</tr>
		</table>
		<div class="productImageBlock"> <img src="#" class="productImage"/> </div>
</div>
<label class="editProduct">Edit</label>
<label class="deleteProduct">Delete</label>
</body>
</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.