Align div to the right side [duplicate]

Question

Hi I have the below HTML, Inside the Container I have Header, section and div. With my current CSS below the div with class rightSideDiv does not show to right to the section element.

.container {
  height: 500px;
  widht: 500px;
  background-color: red;
}

.headerTitle {
  display: inline-block;
		height: 24px;
		margin: 24px 24px 0;
		padding: 0;
		line-height: 24px;
}

.sectionClass {
  width:249px;
  height:200px;
    background-color: yellow;

}

.rightSideDiv {
    width:249px;
  height:200px;
  border: 4px solid green;

}

<aside>
  <div class="container"> 
    <header class="headerTitle"> Header Title  </header> 
    <section class="sectionClass"> .  </section>
    <div class="rightSideDiv"> </div>
  </div>
  </aside>

The section and div should be shown side by side. I dont want to modify the current HTML structure. I have tried specifying float:left or right but both doesn't seem to work.

Answer 1

Apply float: left; to both containers, use width: 50%; instead of px and display: block; header

.container {
  height: 500px;
  width: 500px;
  background-color: red;
}

.headerTitle {
  display: block;
  height: 24px;
  margin: 24px 24px 0;
  padding: 0;
  line-height: 24px;
}

.sectionClass {
  width:50%;
  height:200px;
  background-color: yellow;
  float: left;

}

.rightSideDiv {
  width:50%;
  height:200px;
  background-color: pink;
  float: left;

}

<aside>
  <div class="container"> 
    <header class="headerTitle"> Header Title  </header> 
    <section class="sectionClass"> .  </section>
    <div class="rightSideDiv"> </div>
  </div>
  </aside>