CSS - Sizes

.box1 {
    background: orange;
    width: 200px;
    height: 100px;
    color: white;
}

.box2 {
    background: green;
    width: 50%;
    height: 200px;
    color: white;
}   

    width is fixxed with display: inline-block


    width is 50% of the windows width with 
    display: inline-block and without crlf between the boxes
    

.box3 {
    background: orange;
    width: 200px;
    height: 100px;
    color: white;
    display: inline-block;
}
.box4 {
    background: green;
    width: 50%;
    height: 200px;
    color: white;
    display: inline-block;
}   

floating right, although first in code
floating left, although second in code

.box5 {
    background: orange;
    width: 200px;
    height: 100px;
    color: white;
    float: right;
}
.box6 {
    background: green;
    width: 50%;
    height: 200px;
    color: white;
    float: left;
}