positioning of float elements without spacing

Question

I have long been trying to solve this problem. whenever I create a site using div’s that are float I have the problem of leaving a blank space after the 1st div in the line break as in the example here:

http://jsfiddle.net/qxbxntvc/

wanted to know how I do so that there is no white space between the red div and the rose?

Answer 1

I can not work with a grid system where the sum of all width exceeds 100%, in the case of your example the total of div gives 200%.

In this case I would use nested div

div.column
{
    width:50%;
    float:left
}
#a{height:50px;background:red}
#b{height:20px;background:green}
#c{height:60px;background:blue}
#d{height:40px;background:pink}

<div class="column">
    <div id="a">
        
    </div>
    <div id="c">
        
    </div>
</div>
<div class="column">
    <div id="b">
        
    </div>
    <div id="d">
        
    </div>
<div>

Answer 2

The question is in the size of the div.

Pay attention that the blue div has 60px; And the rose starts soon after the same with a smaller number. In other words the problem there is the size of them.

To solve this problem you would have to do so:

#c{height:60px;background:blue; float: right;}

Answer 3

I had this problem and I managed to solve it like this:

body {
  width: 1048px;
  height: auto;
  background: center, no-repeat;
  background-size: cover;
  background-color: #8E24AA;
}


/*COLUNA 1 E TEXTO*/

.column1 {
  width: 500px;
  height: 350px;
  background: #F3E5F5;
  float: left;
}


/*COLUNA E TEXTO 2*/

.column2 {
  width: 500px;
  height: 350px;
  background: #E1BEE7;
  float: right;
}


/*CONTEINER COM AS COLUNAS*/

.content {
  content: "column";
  display: table;
  clear: both;
}

<div class="content">
  <div class="column1 column">
    <h1>TESTING TESTING</h1>
  </div>
  <div class="column2 column">
    <h2>TESTING TESTING</h2>
  </div>
</div>