CODEWITHSUNDEEP
csselement
JudeDias
JudeDias

Reputation: 37

How to Stack two or more Elements to the Right hand side using CSS

I would like to have my Header Elements stack on top of each other to the right hand side of the screen (H1 element with the H2 element right under it). I am just starting to get a hang of CSS so do bear with me. Tried searching online for solutions but was only able to find an answer for when there was a single element.

Anyways this is what the page is looking like right now on screen:

enter image description here

The blue "We Help People and Businesses" is an H1 Element. The white "Achieve today's Goals and tomorrow's Aspirations" is an H2 Element. Both of these Header elements are nested within a DIV

Currently the CSS code is looking like this:

.hero01_content-div {
  margin-top: 400px;
}

.hero01_content-head-test-main {
  position: relative;
  width: 600px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 5px 15px;
  float: right;
  background-color: #0080c7;
  font-family: Lato, sans-serif;
  color: white;
  text-align: right;
}

.hero01_content-subhead-test-main {
  position: relative;
  width: 500px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 10px 15px;
  float: right;
  background-color: white;
  font-family: Lato, sans-serif;
  color: #ec008c;
  text-align: right;
}

How can I make the H2 element stack right under my H1 element with both of these elements on the right hand side? I would appreciate any help. Thank you in advance.

A codepen demonstrating the above can be found here: http://codepen.io/anon/pen/qOoVxb

Upvotes: 2

Views: 69

Answers (2)

user5125729
user5125729

Reputation:

OK you need to remove 

.hero01_content-div {
margin-top: 400px;
float: right;
}

Then change these

.hero01_content-head-test-main {
postion: absolute;
top: 0px;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}

.hero01_content-subhead-test-main {
float: right;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}

Upvotes: 0

m4n0
m4n0

Reputation: 32355

You need to set float: right to the parent container and remove the floating properties from the heading element as it takes it out of the normal flow.

Codepen Demo

.hero01_content-div {
  margin-top: 400px;
  float: right; /* Added */
}
.hero01_content-head-test-main {
  position: relative;
  width: 600px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 5px 15px;
  background-color: #0080c7;
  font-family: Lato, sans-serif;
  color: white;
  text-align: right;
}
.hero01_content-subhead-test-main {
  position: relative;
  width: 500px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 10px 15px;
  float: right;
  background-color: white;
  font-family: Lato, sans-serif;
  color: #ec008c;
  text-align: right;
}
<div class="w-section hero-01">
  <div class="hero01_overlay">
    <div class="w-container hero01_content">
      <div class="w-clearfix hero01_content-div hero01_test" data-ix="scroll-reveal">
        <h1 class="hero01_content-head-test-main">We Help People and Businesses</h1>
        <h2 class="hero01_content-subhead-test-main">Achieve today's Goals and tomorrow's Aspirations</h2>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions