Css: Can't Place Two Divs Beside Each Other

How can I place two divs with lots of child divs beside each other? I want red part to be right to Blue part. Note: Name and surname are fake, so that doesn't matter. My HTML: <

Solution 1:

You need to use the float:left; styling property for #AccountAvatar and #AccountInfo. Also set the width of #AccountInfo to 70% (remaining width).

Re-style your css for #AccountAvatar and #AccountInfo as follows:

#AccountAvatar{
    background-color: blue;
    width: 30%;
    float:left;
}
#AccountInfo{
    width: 70%;
    font-size: 1.7vh;
    float:left;
}

Here's a demo.

Solution 2:

One way you can achieve this is with display: table

Here is a working demo - http://jsbin.com/povajidesa/1/edit?html,output

What I changed:

• added display: table to the #AccountFrame ruleset
• added display: table-cell to the #AccountAvatar and #AccountInfo rulesets
• added vertical-align: top to the #AccountInfo ruleset to align the text vertically, this can be changed as needed.