CSS div's are not separating

Question

I have a problem aligning my div's side by side...

Here is an image how it should look:

This is the code for the main structure:

<div id="AttackDiv">
    <div id="ImageDiv">
    </div>
    <div id="ContentDiv">
    </div>
    <div id="SkillDiv">
    </div>
</div>

The "ImageDiv" is where the picutre is located. It takes up 120px. The "ContentDiv" is where the text is inside and the "SkillDiv" is where the 3 other black boxes are inside.

This is my CSS:

#ImageDiv {
    height: 100%;
    width: 120px;
    float: left;
    background-color: white;
}

#ContentDiv {
    height: 60%;
    background-color: green;
}

#SkillDiv {
    height: 40%;
    background-color: blue;
}

Shows up this:

The problem is when I am trying to add those black boxes which you can see above in the image. Here is how it looks:

If I remove the white background color, you can see that somehow the Div's aren't aligning properly. They are kinda like running in each other.

score 1 · Answer 1 · answered Aug 01 '16 at 20:48

Put the stuff on the right side into its own div container and then float it to the right.

If I understood you right, this should be it:

HTML

<div id="AttackDiv">
    <div id="ImageDiv">left
    </div>
    <div id="RightSide">
      <div id="ContentDiv">right1
      </div>
      <div id="SkillDiv">right2
      </div>
    </div>
</div>

CSS

#ImageDiv {
    height: 100%;
    width: 120px;
    float: left;    
    background-color: white;
}

#ContentDiv {
    height: 60%;
    background-color: green;
}

#SkillDiv {
    height: 40%;
    background-color: blue;

}

#RightSide {
  float: right;
  width: 200px;
 }

You can look at it here: https://jsfiddle.net/mxcqyjos/4/

score 1 · Accepted Answer · edited May 23 '17 at 12:08

Divs are block elements by default and, in the normal flow, they occupy 100% width of their container. So, naturally, div elements will stack vertically forming a column.

To make them align side-by-side consider these options:

apply float: left to all divs you want to display in a row
define the divs as display: inline-block

OR, for a very simple and efficient solution, just use flexbox:

Aligning Three Divs Horizontally Using Flexbox

Also, when working with floats, it helps to be familiar with clearfix methods:

CSS div's are not separating

2 Answers2