I have 2 rows of floating (left) divs using display:table-cell. However, for some reason only in Chrome, when I resize the browser window from narrower back to wider, the floats are cleared. I am forced to refresh Chrome in order to reset the floats. Here’s a URL to view it live: http://dexydemo.com/chrome/
CSS:
body {
font-family:Open Sans;
background-color:#fff;
color:#252525;
margin: 0;
padding: 0;
width: 100%;
-webkit-text-size-adjust: none;
}
#slide3 {
color: #fff;
margin: 0 auto 0;
padding: 0;
}
.slide3content {
max-width:1200px;
margin:0 auto ;
text-align:center;
padding:80px 0 80px 0;
overflow:auto;
}
#slide3 h2 {
font-family:Roboto Condensed;
color: #fff;
font-size: 28px;
line-height:34px;
font-weight:700;
text-transform:uppercase;
text-align: left;
z-index: 1;
padding:10px 0 15px 0;
margin:0;
}
.slide3left {
background:rgba(73,168,215,0.7);
vertical-align:top;
width:50%;
padding:0 0 0 0;
text-align:left;
display: table-cell;
font-size:18px;
line-height:30px;
}
.slide3leftpad, .slide3rightpad {
padding:40px 40px 50px 40px;
}
.slide3right {
background:rgba(251,159,17,0.7);
width:50%;
text-align:left;
display: table-cell;
font-size:18px;
line-height:30px;
}
.color-c {
background:rgba(140,198,64,0.7);
width:50%;
text-align:left;
display: table-cell;
font-size:18px;
line-height:30px;
}
.color-d {
background:rgba(154,90,162,0.7);
width:50%;
text-align:left;
display: table-cell;
font-size:18px;
line-height:30px;
}
/* BEGIN MOBILE CSS */
@media only screen and (min-width:1111px) and (max-width: 1240px) {
.slide3centeredcontent {
padding:0 25px;
}
}
@media only screen and (min-width:891px) and (max-width: 1110px) {
#slide3 {
background-attachment:scroll;
}
.slide3content h2 {
font-size: 3.1vw;
line-height:4.0vw;
}
}
@media only screen and (min-width:550px) and (max-width: 890px) {
#slide3 {
background-attachment:scroll;
}
.slide3centeredcontent {
padding:0 25px;
}
.slide3content h2 {
font-size: 5.5vw;
line-height:6.0vw;
}
.slide3left {
width:100%;
display:inline-block;
}
.slide3leftpad {
padding:60px 20px;
}
.slide3right {
width:100%;
display:inline-block;
}
.slide3rightpad {
padding:60px 25px 40px 25px ;
}
}
@media only screen and (min-width:421px) and (max-width: 549px) {
#slide3 {
background-attachment:scroll;
}
.slide3centeredcontent {
padding:0 25px;
}
.slide3content h2 {
font-size: 5.9vw;
line-height:6.2vw;
}
.slide3left {
width:100%;
display:inline-block;
}
.slide3leftpad {
padding:60px 20px;
}
.slide3right {
width:100%;
display:inline-block;
}
.slide3rightpad {
padding:60px 25px 0 25px ;
}
}
@media screen and (max-width: 420px){
.slide3left {
width:100%;
display:inline-block;
}
.slide3leftpad {
padding:60px 20px;
}
.slide3right {
width:100%;
display:inline-block;
}
.slide3rightpad {
padding:60px 25px 0 25px ;
}
}
HTML:
<div id="slide3">
<div class="fullscreen background parallax" style="background-image:url(picts/homebg.jpg);" data-img-width="1600" data-img-height="1064" data-diff="400">
<div class="slide3content">
<div class="content-a">
<div class="content-b">
<!-- LEFT HALF 1 -->
<div class="slide3left">
<div class="slide3leftpad">
<h2>TBA</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus enim dui, venenatis non porta ac, molestie at sem. Nulla tincidunt eros a turpis semper, ut porttitor nibh tincidunt. Etiam nec imperdiet ligula. Quisque et aliquet turpis. Fusce eget molestie dui, vitae luctus leo. Etiam molestie rhoncus metus vel efficitur. Ut euismod lobortis urna, nec ultrices felis consequat id. Quisque ipsum velit, semper et purus tempus, dictum congue metus. Aliquam congue diam non tempor rutrum. Donec vitae lacus eu dui consequat blandit. Sed pharetra id mi sagittis auctor. Maecenas rhoncus leo lectus. Morbi iaculis nibh in leo egestas, non sagittis mauris scelerisque.
</div>
</div>
<div class="slide3right">
<div class="slide3rightpad">
<h2>TBA</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus enim dui, venenatis non porta ac, molestie at sem. Nulla tincidunt eros a turpis semper, ut porttitor nibh tincidunt. Etiam nec imperdiet ligula. Quisque et aliquet turpis. Fusce eget molestie dui, vitae luctus leo. Etiam molestie rhoncus metus vel efficitur. Ut euismod lobortis urna, nec ultrices felis consequat id. Quisque ipsum velit, semper et purus tempus, dictum congue metus. Aliquam congue diam non tempor rutrum. Donec vitae lacus eu dui consequat blandit. Sed pharetra id mi sagittis auctor. Maecenas rhoncus leo lectus. Morbi iaculis nibh in leo egestas, non sagittis mauris scelerisque.
</div>
</div>
<!-- LEFT HALF 1 -->
<div class="clear"></div>
<!-- LEFT HALF 2 -->
<div class="slide3left color-c">
<div class="slide3leftpad">
<h2>TBA</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus enim dui, venenatis non porta ac, molestie at sem. Nulla tincidunt eros a turpis semper, ut porttitor nibh tincidunt. Etiam nec imperdiet ligula. Quisque et aliquet turpis. Fusce eget molestie dui, vitae luctus leo. Etiam molestie rhoncus metus vel efficitur. Ut euismod lobortis urna, nec ultrices felis consequat id. Quisque ipsum velit, semper et purus tempus, dictum congue metus. Aliquam congue diam non tempor rutrum. Donec vitae lacus eu dui consequat blandit. Sed pharetra id mi sagittis auctor. Maecenas rhoncus leo lectus. Morbi iaculis nibh in leo egestas, non sagittis mauris scelerisque.
</div>
</div>
<div class="slide3right color-d">
<div class="slide3rightpad">
<h2>TBA</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus enim dui, venenatis non porta ac, molestie at sem. Nulla tincidunt eros a turpis semper, ut porttitor nibh tincidunt. Etiam nec imperdiet ligula. Quisque et aliquet turpis. Fusce eget molestie dui, vitae luctus leo. Etiam molestie rhoncus metus vel efficitur. Ut euismod lobortis urna, nec ultrices felis consequat id. Quisque ipsum velit, semper et purus tempus, dictum congue metus. Aliquam congue diam non tempor rutrum. Donec vitae lacus eu dui consequat blandit. Sed pharetra id mi sagittis auctor. Maecenas rhoncus leo lectus. Morbi iaculis nibh in leo egestas, non sagittis mauris scelerisque.
</div>
</div>
<!-- LEFT HALF 2 -->
</div>
</div>
</div>
</div>
</div>
<!-- include jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- End -->
<!-- Parallax -->
<script type="text/javascript" src="parallax/init.js"></script>
<!-- Parallax -->
Any help would be appreciated.
Thanks.