CODEWITHSUNDEEP
htmlcssduplicatescombinations
Ted
Ted

Reputation: 3885

CSS combining styles 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.

Upvotes: 4

Views: 7948

Answers (4)

Ibu
Ibu

Reputation: 43850

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

Upvotes: 10

Eddie
Eddie

Reputation: 13126

This should work as expected.

<div class='main-bottom-div left'>
   Test
</div>

<div class='main-bottom-div right'>
    Test
</div>

Upvotes: 1

Litek
Litek

Reputation: 4888

try this:

.main-bottom-div-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:left;}
.main-bottom-div-right { float:right;}

Upvotes: 0

jackJoe
jackJoe

Reputation: 11158

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>

Upvotes: 1

Related Questions