CSS Floating Divs Inheriting - html

Question

I'm floating two divs side by side. I can't set the properties for the left div as they seem to be inherited from the right div. I'm guessing I"m just overlooking something here, but what do I need to do so I they aren't inherited?
div.main - content {
width: 1500 px;
}
div.left {
float: left;
width: 300 px;
overflow: hidden;
background - color: #ffffff;
}
table.;
left {
border - collapse: collapse;
width: 300 px;
}
table.left, td {
border: 1 px hidden black;
padding: 5 px;
background - color: #ffffff;
color: #000000;
}
div.right {
float:right;
width:1200px;
overflow:hidden;
}
table.right {
border-collapse:collapse;
width:765px;
}
table.right, th {
border: 1px solid black;
padding:5px;
background-color:# df1e37;
color: #ffffff;
}
table.right, td {
border: 1 px dotted# cccccc;
padding: 5 px;
background - color: #ffffff;
color: #000000;
}
<div class="main-content">
<div class="left">
<table class="left">
<tr>
<td>Left content here</td>
</tr>
</table>
</div>
<div class="right">
<table class=right>
<tr>
<td>Right content here</td>
</tr>
</table>
</div>
</div>

Answer 1

table.;left should be table.left, for starters. Also, as #3rror404 points out, the comma in your selectors may not mean what you think:
table.left, td
means "a table element with class left, and also td elements", whereas
table.left td
means "a table element's children tds".
After the semicolon change, though, things look OK for me. A possible change you may consider is not putting classes on the tables:
<div class="left">
<table>
<tr><td>Left content here</td></tr>
</table>
</div>
and accessing them this way:
div.left table { ... }
or
div.left > table { ... }
...which IMO would eliminate a possible source of future confusion.

Answer 2

There were a few typo in your code
table.;left => .left table
and a few more similar to that... here is the new snippet
div.main-content {
width:1500px;
}
.left {
float:left;
width:500px;
overflow:hidden;
background-color:rgba(123,123,123,0.1);
}
.left table {
background-color: #feade2;
border-collapse:collapse;
width:300px;
}
.left table td {
color:#000000;
}
.right {
float:right;
width:1000px;
overflow:hidden;
background-color:rgba(200,200,200,0.3);
}
.right table {
border-collapse:collapse;
width:765px;
}
.right table th {
border: 1px solid black;
padding:5px;
color:#ffffff;
}
.right table td {
background-color:blue;
color:red;
}
<div class="main-content">
<div class="left">
<table>
<tr><td>Left content here</td></tr>
</table>
</div>
<div class="right">
<table>
<tr><td>Right content here</td></tr>
</table>
</div>
</div>
I added some colors to differentiate various boundaries... you can change the css the way you want it.
you also dont need div.left or div.right . Just use .left or .right and just specify the class on the div...the table will inherit the classes of the div. Hope this helps