CODEWITHSUNDEEP
htmlcss
aantiix
aantiix

Reputation: 544

CSS Floating Divs Inheriting

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>

Upvotes: 2

Views: 74

Answers (2)

Sai
Sai

Reputation: 1949

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

Upvotes: 0

Ben
Ben

Reputation: 57267

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.

Upvotes: 2

Related Questions