Issue Getting Div To Hug Up Close To Another

I have 6 Divs within a container Div. These divs have to be aligned a certain way for a clients needs. I've taken the basic layout for the customer website I'm working on and creat

Solution 1:

A floated element will move as far to the left or right as it can in the position where it was originally(this is important #1).

So put in this way:

We have 2 div

<div class="div5">div5</div>
<div class="div6">div6</div>

.div-blue{
    width:100px;
    height:100px;
    background: blue;
}

.div-red{
    width:50px;
    height:50px;
    background: red;
}

without float they'll be one below the other

If we float: right the div5, the div6 be positioned on the line when it was the div5,

/*the lines are just for illustrate*/

So if now we float: left the div6 it will move as far to the left as it can, "in this line" (see #1 above), so if div5 change its line, div6 will follow it.

Now let's add other div into the equation

<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>

.div-gree{
    width:150px;
    height:150px;
    background: green;

    float:right;
}

We have this

If we set clear: right to the div5, we are force it to take the line bellow div4

So there you have why happens. Here the jsfiddle where I code this

NOW, HOW TO FIX IT

Just remove the float for the <div id="div6"> and set display: inline-block

like this:

#div6 {
    border: 1px solid pink;
    background-color: pink;
    margin-bottom: 10px;
    width: 65%;

    /*float: left;*/    /*removed*/

    display: inline-block;  /*added*/
}

This will keep the normal behavior for elements without float (The elements after the floating element will flow around it.). The display: inline-block is for your case to maintain the margin of div2.

HERE A JSFIDDLE EXAMPLE WORKING FOR YOUR CASE

I hope this helps now and in the future :)

Solution 2:

You'll need some javascript for this:

window.onload = function(){
    var d6Id = document.getElementById( 'div6' ); 
    var d6distanceTop = d6Id.offsetTop; // Get height above div 6

    var d2height = document.getElementById( 'div2' ).clientHeight; // Get height of div 2

    var space = d6distanceTop - 30 - d2height; // 30 for padding top and bottom + 10px margin

    d6Id.style["margin-top"] = "-"+space+"px";
}