display:table not working on div in Chrome
I have been messing around with trying to get a sidebar to stay fixed to a
center div, and I have it mostly working in Firefox and IE, but for some
reason it is not working in Chrome. My issue is that when I resize the
window the left sidebar no longer extends to the bottom of the page in
chrome. All the code is included below, so you can see what I am seeing in
your own browsers.
My question is: why is Chrome acting this way and is there a way for me to
fix this? My Chrome version is 28.0.1500.95.
Thanks.
<html>
<header></header>
<body style="margin:0;">
<div syle="width:100%; height:auto; padding:0;">
<div style="background-color:blue;
width:33%;margin:auto;display:table; height:100%;">
<div style="background-color:green; height:inherit; width:0px;
float:left">
<div style="position:relative; float:left; top:0;
right:45px; background-color:yellow; width: 30px;display:
table; height:100%;">
--Some lorem ipsum here--
<br style="clear: both; " />
</div>
</div>
<div style="position:relative; float:left; width: 95%;
background-color: orange; margin-left: 10px">
--Some lorem ipsum here--
</div>
<br style="clear: both; " />
</div>
</div>
</body>
No comments:
Post a Comment