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">"Complex Light"</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 © 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…