Aligning responsive divs

Question

I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one. This is how it should look like: http://postimg.org/image/76q5y5w5v/

This is how it looks when improperly rendered: http://postimg.org/image/6a4f8x4j7/

If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.

Answer 1

The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:

.uslugihome2:nth-child(odd) {
    clear: left;
}

Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.

Answer 2

Currently you have the following markup for each box:

<div class="uslugihome2">
   <div class="usluginame">
   <div class="uslugiimage">
   <div class="uslugidesc">
</div>

With reason why you see the gap is due to the width and margin that are set on uslugihome2.

So what I would so is, create another div which wraps the child divs like so:

<div class="uslugihome2">
   <div class="uslugi_wrapper">
      <div class="usluginame">
      <div class="uslugiimage">
      <div class="uslugidesc">
   </div>
</div>

Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.

Once done, add the following to your css file:

.uslugi_wrapper {
    padding: 0 15px;
}

Not sure which browser you want to support but this will also ensure support for the likes of IE8 Hope this helps

Answer 3

That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.

<div style="display: block;">
    <div class="uslugihome2">...</div>
    <div class="uslugihome2">...</div>
</div>
<div style="display: block;">
    <div class="uslugihome2">...</div>
    <div class="uslugihome2">...</div>
</div>