Maximus Decimus Maximus Decimus - 7 months ago 26
HTML Question

Override parent styling to have divs side by side

I know that there are similar questions, but those solutions are not working for me. I am wondering how to OVERRIDE PARENT STYLES. My page is contained in a master page, which has many styles and classes.

For some reason I applied the following CSS but it's not working at all because both

<div>
s are not side by side. Both are taking the full width of the screen. So the second is below the first
<div>
.

So I wanna forget all style in the page and make this work.

Here is my code:



.mysection {
margin: 0px;
}

.mysection > div#first {
margin: 0px;
float: left !important;
display: inline-block !important;
width: 350px !important;
}

.mysection > div#second {
margin-left: 15%;
display: inline-block !important;
width: 350px !important;
}

<section class="mysection">
<div class="first">
<h1>My Title</h1>
<asp:Panel ID="myPanel" runat="server">
<div>Test1</div>
</asp:Panel>
</div>
<div class="second">
<h1>My Title 2</h2>
<div>Test2</div>
</div>
</section>




Answer

Change this: .mysection > div#first to .mysection > .first. Same for .second.

#first refers to an element with the id="first" whereas .first refers to an element the with class="first". The prepended div after the child selector is also unnecessary.

You also closed one of your <h1> tags with </h2> on accident. It's fixed below:

.mysection {
  margin: 0px;
}

.mysection > .first {
  margin: 0px;
  float: left;
  display: inline-block;
  width: 350px;
}

.mysection > .second {
  margin-left: 15%;
  display: inline-block;
  width: 350px;
}
<section class="mysection">
  <div class="first">
  <h1>My Title</h1>
    <asp:Panel ID="myPanel" runat="server">
      <div>Test1</div>
    </asp:Panel>
  </div>
  <div class="second">
    <h1>My Title 2</h1>
    <div>Test2</div>
  </div>
</section>

Comments