Display: table-cell float left divs not resetting back to float on Chrome when resizing browser window

HTML & CSS
1

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.

3

Please try this test code (based on your post) I changed the media queries a bit to minimize the duplicated styles, but, other than being more efficient, that change should be insignificant to your issue. The “cure” for the “resetting” problem is to change the width and display of the stacked boxes to “auto” and “block”. Apparently Chrome doesn’t think that changing “table-cell” to “inline-block” should repaint the screen.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/display-table-cell-float-left-divs-not-resetting-back-to-float-on-chrome-when-resizing-browser-window/259840

-->
    <style type="text/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 (max-width: 1240px) {
    .slide3centeredcontent {
        padding:0 25px;
    }
}

@media only screen and (max-width: 1110px) {
    #slide3 {
        background-attachment:scroll;
    }
    .slide3content h2 {
        font-size: 3.1vw;
        line-height:4.0vw;
    }
}

@media only screen and (max-width: 890px) {
    .slide3content h2 {
        font-size: 5.5vw;
        line-height:6.0vw;
    }
    .slide3left {
        width:auto;
        display:block;
    }
    .slide3leftpad {
        padding:60px 20px;
    }
    .slide3right {
        width:auto;
        display:block;
    }
    .slide3rightpad {
        padding:60px 25px 40px 25px ;
    }
}

@media only screen and (max-width: 549px) {
    .slide3content h2 {
        font-size: 5.9vw;
        line-height:6.2vw;
    }
}

@media screen and (max-width: 420px) {}
    </style>
</head>
<body>

<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>
                            1. 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>
                            2. 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>
                           3. 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>
                            4. 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>
<!-- Parallax -->
<script type="text/javascript" src="parallax/init.js"></script>

</body>
</html>

Tested in Chrome only.

Normally, one would have put those colored cells into a css table, then changed the rows and cells to blocks. But this “fix” seems to do the trick.

If you are interested in other solutions, consider flex. :slight_smile:

1 Like
4

Thank you so much…the solution you provided worked. Actually, all I needed to do was use display:block (rather than inline-block) :

@media only screen and (max-width: 890px) {

    .slide3left {
        width:auto;
        display:block;
    }
    .slide3right {
        width:auto;
        display:block;
}
}

Thank you so much!!!

1 Like
5

You’re very welcome .

FYI, the reason I used {width:auto} instead of {width:100%} for the display:block is because by default blocks occupy 100% of the available width. IF the block contains any margin or padding or borders, they could add to the width making it exceed 100% and trigger a horizontal scrollbar. So, personally, I avoid blocks with 100% widths as unnecessary duplication and potential problems. {width:auto} is the safe alternative if a previously limiting width needs to be negated

2 Likes
6

Good to know…thank you again!

1 Like
7

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