Table layout using divs, different table caption position in Chrome and Firefox

Hi Everyone… I am trying to create a table layout using divs. In Firefox the table layout look good. The table captions sits on the top of the table but in Chrome it ends up sitting on the bottom of the columns. Here are the screen captures… Firefox -


Chrome version

I tried giving those columns height but that didn’t help me also. What am I doing wrong? Here is my HTML…

<!doctype html>
<html lang="en">
<head>
</head>
<body>    
<div class="container">
<div class="cartPage">
<div class="imageCart" >
<h1>Shopping Cart</h1>
<form action="/root/carts/update_cart" id="CartIndexForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/><input type="hidden" name="data[_Token][key]" value="b55c4ba98314ab5d2b4a09cadb5938543c22f65a" id="Token868280041"/></div>        
<div class="cartItem">
<div class="tableHead">Item</div>
<div><img src="1.jpg" class="cart-image" alt="image" /> </div>
<div><a href="/root/photo/complex-light">&quot;Complex Light&quot;</a></div> 
<div>Aluminum Plaq:Ready To Hang </div>
<div>5x7</div>
</div>

<div class="price">    
<div class="tableHead">Price</div>
<div>
$10    
</div>
</div>

<div class="qty">    
<div class="tableHead">Qty</div>
<div>
<input type="hidden" name="data[Cart][0][rate]" value="145" id="Cart0Rate"/><div class="input text"><input name="data[Cart][0][qty]" value="3" style="width:50px;" type="text" id="Cart0Qty"/></div>
</div>
</div>

<div class="total">    
<div class="tableHead">Total</div>    
<div>
$10
</div>
</div>

<div style="display:none;"><input type="hidden" name="data[_Token][fields]" value="67e4de4fefbf8366aefefb7cd154a96442d1cdd8%3ACart.0.rate" id="TokenFields1037303069"/><input type="hidden" name="data[_Token][unlocked]" value="" id="TokenUnlocked1389955883"/></div></form> 
</div>
</div>    
<div class="footer">
<div id="seeker">
<form action="/root/photos/search" id="PhotoIndexForm" method="get" accept-charset="utf-8"><input name="search" id="search" value="" type="text"/><input type="submit"  id="find" value="Search" ></form>        </div>
<p class="footnote"> Copyright &copy; 2014  </p>
</div>
</div>
</body>
</html>

And CSS is…

body{background:#979595;}
.container{width:100%;display: table;height: 100%;table-layout: fixed;text-align:center; }
.tableHead{display:table-caption;}
.price{display:table-cell; padding:margin-left:2em;  }
.cartItem{display:table-cell; }
.qty{display:table-cell;margin-left:2em;}
.total{display:table-cell; margin-left:2em;  }
.imageCart{display:table; border-spacing:1em; width:100%;height:auto; position:relative; margin:0 auto;}
.cartItem img {width:100%;height:auto;}
.cartPage{position:relative;width:80%; margin:0 -1em;}
h1 {text-align:left;}

Thanks for your help…

Try to wrap columns with another div with display:table-row. You have only table and cells now, without any rows.

And… maybe it’s a dumb question, but why not to use regular table to display table data?

Thank you megazoid, for your help. Looks like display:table-row is not helping. :frowning: I am trying to make responsive page and divs seem to be easier for the task, I could be wrong. If I cannot fix this problem , I am forced to use tables for my data… :smile:

Do you have live version of this page somewhere?

To the cells apply: {vertical-align:top} for starters

1 Like

megazoid thank you! Yes there… here is the link site

I will try this @ronpat thank you! :smile:

@ronpat is right, vertical-align:top solves the issue.
Also you have a syntax error:

.price{display:table-cell; padding:margin-left:2em;  }

look at padding

Thank you @ronpat that solves the problem! :smile:

Thank you for @megazoid your help and for pointing out the mistake there… :smile:

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