Clever Geek Handbook

I have a little alignment problem in my CSS

I've tried a few things, like making the divs smaller (even very small to see if they go next to each other) and experimenting with inline-block / float on the left and right, but I can't seem to get my divs side by side. below is 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;
}
+3


source to share


4 answers


See fiddle

See updated css

below. I did this, I removed both clear:both;

and display:inline-block;

from yours css

and added float:left;

to both <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 used the background color in the fiddle to show that the two divs are aligned correctly.
+2


source


try deleting clear:both

from the partitions you want to go side by side.



+1


source


remove clear: both

and then give them float: left;

http://jsfiddle.net/ydrzcrjp/

+1


source 


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

Why clear: both

in both elements? If you need to clean the items, wrap them and fit them clear: both

in a shell.

+1


source






More articles:


All Articles