clusterBuddy clusterBuddy - 2 months ago 15
CSS Question

Parent div with floating children unresponsive

My first issue is that the boxes are not aligning properly like this:

enter image description here
And the 2nd issue is that I'm trying to make a responsive div where the

rightHand
parent
div
shrinks responsively while having the floating children also collapse responsively into a single row where each cube would take from it's parent a quarter of the width of it's parent.

Here's my fiddle.

HTML:

<div class ='rightHand'>
<div class="box redBox"></div>
<div class="box greenBox"></div>
<p>hi this is a test</p>
<div class="box blueBox"></div>
<div class="box yellowBox"></div>
</div>


and CSS:

.rightHand{
height:100%;
width:680px;
float: right;
background-color: #000000;
}
.rightHandOverlay{
background-color: white;
opacity: 0.5;
}
.rightHand p{
color: white;
position: relative;
text-align: center;
}
.box{
width:100px;
height: 100px;
}
.redBox{
float: left;
background-color:red;
left: 0;
top:0;
}
.greenBox{
float: right;
right:0;
top: 0;
background-color: green;

}
.blueBox{
float: right;
bottom: 0;
right:0;
background-color: blue;
}
.yellowBox{
float: left;
left:0;
bottom: 0;
background-color: yellow;
}

Answer

do you mean something like that?

jsfiddle

.rightHand {
      height: 100%;
      width: 680px;
      float: right;
      background-color: #000000;
    }

    .rightHand p {
      position: relative;
      text-align: center;
    }

    .box {
      width: 100px;
      height: 100px;
    }

    .redBox {
      background-color: red;
      float: left;
    }

    .greenBox {
      float: right;
      background-color: green;
    }

    .blueBox {

      clear:left;
      bottom: 0;
      float: right;
      background-color: blue;
    }

    .yellowBox {
      float: left;
      bottom: 0;
      background-color: yellow;
    }