CODEWITHSUNDEEP
cssresponsive-designcss-floatmedia-queries
showdev
showdev

Reputation: 29168

Unexpected behavior changing inline-block and float with media query

I'm creating a responsive page with three elements. The left two elements are set to display:inline-block so they'll appear side-by-side. The third element is set to float:right so it will align to the right side of the page instead of being inline with the other two elements. I have a CSS media query that makes all three elements display vertically when the window is less than 600px wide.

When I shrink the window smaller than 600px and then stretch it out to be wide again, the third element does not display at the top of the page. It floats to the right side of the page, but there is space at the top as if it's placed below the other two elements.

I see this behavior on a Mac in Chrome 43 and Safari 7.1.6, but NOT in Firefox 38.0.5.

Why does this happen?
Is there any remedy?

I realize there are other ways to structure this layout to avoid this issue. I'm more interested in why this behavior occurs than in alternate methods, especially since it only seems to happen in specific browsers.

Here's an illustration of the issue:

enter image description here

Please see the demonstration below. Use the "Full page" button so that you can resize the window to test the media query.

div#image {
  display: inline-block;
  vertical-align: middle;
  width: 30%;
}
div#image img {
  max-width: 100%;
}
div#caption {
  display: inline-block;
  width: 20%;
}
div#text {
  float: right;
  width: 30%;
}
div#text p {
  margin: 0 0 1em;
}

@media only screen and (max-width: 600px) {
  
  div#image,
  div#caption {
    display: block;
    width: auto;
  }
  div#text {
    float: none;
    width: auto;
  }
  
}
<div id="image">
  <img src="http://lorempixel.com/400/300/abstract/3/" alt="">
</div>
<div id="caption">
  Caption goes here.
</div>

<div id="text">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat.</p>
  <p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
  <p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem.</p>
</div>

Upvotes: 0

Views: 857

Answers (1)

lucian
lucian

Reputation: 681

It's because of the float:none - for some reason* it remains stuck when you stretch back - just don't use it and you'll be fine. That div staying floated in a column won't probably make any difference anyway.

*(I suspect browsers may choose to ignore reverting the rules in this case to save on resources, since this sort of resizing is mostly done by developers for testing purposes and not so much by regular users - but it's just speculation)

Upvotes: 1

Related Questions