Background color not stretching with media query

Question

I'm trying to understand why the background color of the "row" element doesn't stretch on tablets. On tablets it appears only in the "center" element, while on desktop it's applied also to "left" and "right" divs. In the code, I put the "right" div before the "center" div because I want to align the "right" div to the "left" div on mobile/tablets.

Edit2: I've just realised that the real problem is that the background color of the h3 tag in the center div is applied to the left and right div. Though, I didn't find any solution, neither the reason why this happens.

Edit: I've just noticed that if I use clear:both; instead of float:none; in the media query of the center element it works. Why?

.row {
  background-color: #5c5c5c;
}
.row h3{
  background-color: #fff;
}
.left {
  width: 25%;
  float: left;
  color: #fff;
  padding: 0 10px 0 10px;
}
.right {
  width: 25%;
  float: right;
  color: #fff;
  padding: 0 10px 0 10px;
}
.center {
  width: 50%;
  float: left;
  border-left: 2px solid #eaeaea;
  border-right: 2px solid #eaeaea;
}
.clear {
  clear: both;
}
@media (max-width: 1023px) and (min-width: 768px) {
  .left {
    float: left;
    width: 50%;
  }
  .right {
    float: left;
    width: 50%;
  }
  .center {
    float: none;
    width: 100%;
  }
}

<div class="row">
  <div class="left">
    content
  </div>
  <div class="right">
    content
  </div>
  <div class="center">
    <h3>content</h3>
  </div>
  <div class="clear"></div>
</div>

@Kode.Error404 Yes. I've just noticed that if I use clear:both; instead of float:none; in the media query of the center element it works. Why? — testermaster, Jul 14 '16 at 00:42
Here is a good explanation for your why :) https://css-tricks.com/all-about-floats — Nguyen Tuan Anh, Jul 14 '16 at 00:46
@NguyenTuanAnh I've read that tutorial few days ago, though, I don't understand where's the problem in my code. There's a clear in the code, before the end of the "row" element. Why should I add another one, and the background is applied only to the "center" element? If something, I'd expect it to be applied to the "left" and "right" elements. — testermaster, Jul 14 '16 at 00:51
@Pangloss look at the html code, `
` is there. I need IE9 support. — testermaster, Jul 14 '16 at 01:09
I don't know what your original code was, but your updated code works just fine, isn't it? — Stickers, Jul 14 '16 at 01:13
@Pangloss sorry, I've just realised that the problem is with an H3 tag in the "center" div. The real problem is that the background of that H3 tag is applied to "left" and "right" divs. I've updated the code. — testermaster, Jul 14 '16 at 01:18
OK, i'm going to put things together into an answer, wait a moment. — Stickers, Jul 14 '16 at 01:22
@Pangloss thanks. FYI, I've also noticed that when I inspect the code with chome, and I pass the mouse on the `center` div, chrome highlights also the `right` and `left` divs. — testermaster, Jul 14 '16 at 01:26

Stickers · Accepted Answer · 2016-07-14T01:40:13.250

A couple of issues need to be fixed:

(1) You are using width + padding + border for the grid, it's better to set apply box-sizing: border-box to them, or just to all e.g.

* {
  box-sizing: border-box;
}

So that any padding and borders will be calculated as part of the width.

(2) You have <div class="clear"></div> set below all three left, right and center divs, that works. However in you media queries, the center no longer floats, so that you'll have to clear the float right after left and right divs. You can just add clear: both;.

@media (max-width: 1023px) and (min-width: 768px) {
  .center {
    ...
    clear: both;
  }
}

jsFiddle

Side note, there is default margin on <h3> tag, so the white background may not expand all the way to the top and bottom, you can reset it by using margin: 0; and use padding instead if you do need the spacing.

Thanks. Do you know the reason why this happens? I've always used `float:none` in media query, rather than `clear:both`. This is the first time I'm having a problem with this. — testermaster, Jul 14 '16 at 01:39
You only reset one div to not to float, but there are still two divs floating, you still need to do the clearfix. — Stickers, Jul 14 '16 at 02:07

Background color not stretching with media query

1 Answers1