CSS combining styles question

Question

I have a div that is divided into two parts. left and right. it started as :

main-bottom-div-left{ 
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    color: #5c5622;
    width:348px;
    margin-left:10px;
    padding-right:7px;
    margin-right:0px;
    margin-top:5px;
    height:30px;
    background-color:#d9d4a5;


    **float:left;**
}

main-bottom-div-right{ 
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    color: #5c5622;
    width:348px;
    margin-left:10px;
    padding-right:7px;
    margin-right:0px;
    margin-top:5px;
    height:30px;
    background-color:#d9d4a5;


    **float:right;**
}

I was thinking that it would make more sense to have something like this

main-bottom-div {
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    color: #5c5622;
    width:348px;
    margin-left:10px;
    padding-right:7px;
    margin-right:0px;
    margin-top:5px;
    height:30px;
    background-color:#d9d4a5;
}

.left {
    float:left;
}


.right {
    float:right;
}

And to somehow refer to each with something like

<div class="**main-bottom-div.right**"></div>
<div class="**main-bottom-div.left**"></div>

It doesn't work as expected, I also tried span. All I try to achieve is not having duplicates, and basically have what I had before with the duplicates.

Answer 1

you can assign multiple class to an element:

<div class="main-bottom-div right"></div>
<div class="main-bottom-div left"></div>

all you need is to put a space between them

Answer 2

that's because multi class can't have a period, you need a space, like this:

<div class="main-bottom-div right"></div>
<div class="main-bottom-div left"></div>