CODEWITHSUNDEEP
cssgoogle-chrome
artekcs
artekcs

Reputation: 33

CSS3: 3-column responsive display shifts when rendered on Chrome

I have the following HTML and CSS.

<!doctype html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Daily Focus</title>
  </head>
  <style type="text/css">
    .column-left{ float: left; width: 33%; }
    .column-right{ float: right; width: 33%; }
    .column-center{ display: inline-block; width: 33%; }
    @media screen and (max-width: 600px) {
      .column-left, .column-right, .column-center{ float: none; width: auto; }
    }
  </style>
  <body>
    <div id="col1" class="column-left">
      <h2>Column 1</h2>
      <p>This is the leftmost column</p>
    </div>
    <div id="col2" class="column-center">
      <h2>Column 2</h2>
      <p>This is the middle column</p>
    </div>
    <div id="col3" class="column-right">
      <h2>Column 3</h2>
      <p>This is the rightmost column</p>
    </div>
  </body>
</html>

The purpose is to display a responsive 3-column layout: over 600px wide, 3 columns are displayed, and below that, the columns are stacked.

This works pretty well on IE 11.x, Firefox 36.x and Safari 8.x. Going from below 600px to over and back, the columns stack and align, as intended.

When I try this on Chrome 41, the rightmost column never gets aligned, except when initially displayed. If I resize under 600px, the columns stack, but then, if I resize over 600px, the third column goes right, but shifts downwards, below the other two (not enough reputation to post images yet, but I think you get the idea)

I have tried a few combinations of the usual style attributes (float / display), to no avail. What is Chrome doing the others don't (or the reverse) and how can I fix it so the layout renders the same on all 4 desktop browsers?

Thank you!

Upvotes: 1

Views: 240

Answers (2)

LiamRyan
LiamRyan

Reputation: 1908

I can also reproduce this on a separate site. I've raised an issue here - https://code.google.com/p/chromium/issues/detail?id=472122

EDIT Confirmed as a bug, you can track fix progress at the link above.

Workarounds include floating all divs to the left or floating first two and using position: relative on enclosing div and position:absolute;right:0px; on the div you want floated to the right

Upvotes: 2

Matias Fernandez Martinez
Matias Fernandez Martinez

Reputation: 1885

I think is a Chrome's bug, but i can't find any report of that particular scenario, only errors when the developers uses clear:both on the wrapper

But you can use float: left; width: 33%; on all your columns and get the desire result, you don't need to use float:right; one and use inline-block because those 3 elements already are in the same formatting context

.column-left{ float: left; width: 33%; }
.column-right{ float: left; width: 33%; }
.column-center{ float: left; width: 33%; }
@media screen and (max-width: 600px) {
  .column-left, .column-right, .column-center{ float: none; width: auto; }
}

I hope it helps you

Upvotes: 0

Related Questions