I have a slight issue with alignment in my CSS

Question

I've tried several things like making the divs smaller (even very tiny to see if they go next to each other) and experimenting with inline-block/float left and right but I can't get my divs side by side, below is the CSS please help

#ContentHome {
    clear: both;
    margin-left: 0;
    width: 79%;
    display: inline-block;
    vertical-align: top;
    border: thin solid #FFF;
    color: #000000;
}
#Side {
    clear: both;
    margin-left: 0;
    width: 20%;
    display: inline-block;
    vertical-align: top;
    font-family: "Myriad Pro", Calibri;
    font-size: 16px;
    border: thin solid #FFF;
    color: #000000;
}

Answer 1

See this fiddle

See the updated css below. What i have done is that, I removed both the clear:both; and display:inline-block; from your css and added float:left; to both of the <div>s.

CSS

#ContentHome {
    margin-left: 0;
    width: 79%;
    vertical-align: top;
    border: thin solid #FFF;
    color: #000000;
    float: left;
}
#Side {
    margin-left: 0;
    width: 20%;
    vertical-align: top;
    font-family:"Myriad Pro", Calibri;
    font-size: 16px;
    border: thin solid #FFF;
    color: #000000;
    float: left;
}

• I've used background color in the fiddle just to show that the two divs are aligning correctly

Answer 2

try removing clear:both from the divs you want to go side by side.