Min-height is not working in this block

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?


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:

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

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

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