CODEWITHSUNDEEP
csspositioncss-position
Steven
Steven

Reputation: 19

Align elements relative to each other

Basically I'm wondering if you can position 2 elements relative to each other. I have a h1 and h2 inside a div, I want to align the h2 to the right side of the h1

enter image description here

html

<header>
  <div>
    <h1>Header with some text</h1>
    <h2>Other header</h2>
  </div>
  <div>
  </div>
  <div>
  </div>
</header>

css

header { 
  width: 960px;
}

div {
  width: 318px;
  float: left;
  border: 1px solid red;
  min-height: 200px;
}

h1, h2 {
  font-size: 16px;
}

Upvotes: 0

Views: 1171

Answers (2)

Paulie_D
Paulie_D

Reputation: 115278

The simplest solution is to wrap the headings in an extra inline-block div and the apply text-align:right.

.parent {
  width: 80%;
  border: 1px solid red;
}
.wrap {
  display: inline-block;
  text-align: right;
}
<div class="parent">
  <div class="wrap">
    <h1>
I'm a really long h1 tag
</h1>
    <h2>
 Short h2 tag
</h2>
  </div>
</div>

Upvotes: 2

faiyaz syed
faiyaz syed

Reputation: 44

use this code

.some_class > * {
  display:inline-block;

  }
<div class="some_class">
  <h1>some text</h1>
  <h2> Some other text </h2>
  
  </div>

Upvotes: -1

Related Questions