Align div to the right side

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.

See also https://stackoverflow.com/questions/3619233/div-side-by-side-without-float — TylerH, Feb 19 '18 at 14:37
Also spelling mistake in width - when corrected the width of the line will push the green box down — mplungjan, Feb 19 '18 at 14:38
Also https://stackoverflow.com/questions/2716955/css-layout-aligning-two-divs-side-by-side — TylerH, Feb 19 '18 at 14:39

Dean Coakley · Answer 1 · 2018-02-19T14:43:25.143

2

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>

edited Feb 19 '18 at 14:43

answered Feb 19 '18 at 14:36

Dean Coakley

1,675
2
11
25

You still spell width wrong - when corrected the parent container will be too narrow – mplungjan Feb 19 '18 at 14:39
@mplungjan OP spelled width wrong. Thanks for pointing that out though. Fixed – Dean Coakley Feb 19 '18 at 14:40
I know he did. But your snippet editor pointed it out and your fix made it fail again :) You need 510px or so – mplungjan Feb 19 '18 at 14:41
Actually you need to have a sectionClass width of < 50% – mplungjan Feb 19 '18 at 14:43
@mplungjan I'm quite confident OP used border just to show the diff between divs. So I just edited answer to use bg color. Maybe that's better? – Dean Coakley Feb 19 '18 at 14:46
1

Works with 2x49% or no border :) – mplungjan Feb 19 '18 at 14:47

score 0 · Answer 2 · edited Feb 19 '18 at 14:40

0

Try using flexbox and display:flex instead. With very few changes to css you can get something like this: https://jsfiddle.net/vnuz47va/2/

.container {
  height: 500px;
  width: 520px;
  background-color: red;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

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

.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>

edited Feb 19 '18 at 14:40

McVenco

1,011
1
17
30

answered Feb 19 '18 at 14:34

aMJay

2,215
6
22
34

2

Please don't make people go to another site to get their answer. Code should be on this site. See [answer]. – Heretic Monkey Feb 19 '18 at 14:36
You need to pay attention to the spelling mistake in witdh - and when fixed make it wider than 500 px – mplungjan Feb 19 '18 at 14:38

score 0 · Answer 3 · edited Feb 19 '18 at 14:45

change your css with this :

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

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

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

}

.rightSideDiv {
    float : right;
    width:50%;
    height:200px;
    border: 4px solid green;

}

you can use float right and left to align your div, however your container has a width to 400 and your 2 div are 249+249 = 498 so there is a problem here..

score 0 · Answer 4 · answered Feb 19 '18 at 14:38

Change the H2 to display: block;, and then add float:left; to both boxes.

When you want divs side-by-side through floating, float them the same direction.

rightSideDiv is 8 pixels taller than the other. That is because the 4px border is added on top of the height. Consider using box-sizing: border-box;, which makes the border get absorbed into the set height, instead of being added on top of it.

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

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

.sectionClass {
  width:249px;
  height:200px;
  background-color: yellow;
  display: inline-block;
  float: left;

}

.rightSideDiv {
    width:249px;
  height:200px;
  border: 4px solid green;
  display: inline-block;
  float: left;
}

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

Align div to the right side

4 Answers4

Linked