CODEWITHSUNDEEP
htmlcss
kevintrankt
kevintrankt

Reputation: 179

CSS: Position header to the left of content

I'm trying to align my headers to the left of my content (see below).

enter image description here

I attempt to do this with the following CSS:

h4{
    font-family: 'Cera GR Medium', Fallback, sans-serif !important;
    font-size: .75rem;
    color: #F38181;
    letter-spacing: .2rem;
    text-align: right;
    margin-right: 100px;
    width: 200px;
    float:left;
}

p{
    float:right;
    font-weight: 300;
    font-size: 1rem;
    width: 100%;
    max-width: 650px;
}

This results with the following layout: enter image description here

The "Skills" heading is appearing before the p element ends and the heading spacing seems independent from the p element.

HTML Code:

<h4>BACKGROUND</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh egestas, consequat dui ac, sagittis dolor. Suspendisse
  mollis ipsum ac orci vulputate interdum. Etiam id laoreet ligula. Sed nec est maximus, lobortis urna sit amet, molestie
  purus. Donec tristique tempus quam, in cursus erat lacinia ut. Duis tempor justo et pharetra laoreet. Phasellus maximus,
  nunc lobortis ultrices maximus, purus justo bibendum erat, ut tincidunt elit urna eu purus. Donec at mauris pretium, pulvinar
  mi at, pretium velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut nulla eu justo </p>
<h4>SKILLS</h4>

Upvotes: 0

Views: 131

Answers (2)

Vicky Maharjan
Vicky Maharjan

Reputation: 316

Is this what you need?

You have to enclose the title and contents inside a div which floats as well.

h4{
    font-family: 'Cera GR Medium', Fallback, sans-serif !important;
    font-size: .75rem;
    color: #F38181;
    letter-spacing: .2rem;
    text-align: right;
  height:auto;
    width: 19%;
    float:left;
  border:none;
}

p{
    float:right;
    font-weight: 300;
    font-size: 1rem;
    width: 80%;
border:none;
}
<div style='float:left'><h4>BACKGROUND</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh egestas, consequat dui ac, sagittis dolor. Suspendisse
  mollis ipsum ac orci vulputate interdum. Etiam id laoreet ligula. Sed nec est maximus, lobortis urna sit amet, molestie
  purus. Donec tristique tempus quam, in cursus erat lacinia ut. Duis tempor justo et pharetra laoreet. Phasellus maximus,
  nunc lobortis ultrices maximus, purus justo bibendum erat, ut tincidunt elit urna eu purus. Donec at mauris pretium, pulvinar
  mi at, pretium velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut nulla eu justo </p>
</div>

<div style='float:left'>
  <h4>SKILLS</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh egestas, consequat dui ac, sagittis dolor. Suspendisse
  mollis ipsum ac orci vulputate interdum. Etiam id laoreet ligula. Sed nec est maximus, lobortis urna sit amet, molestie
  purus. Donec tristique tempus quam, in cursus erat lacinia ut. Duis tempor justo et pharetra laoreet. Phasellus maximus,
  nunc lobortis ultrices maximus, purus justo bibendum erat, ut tincidunt elit urna eu purus. Donec at mauris pretium, pulvinar
  mi at, pretium velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut nulla eu justo </p></div>

Upvotes: 1

Vetrivel Pandiyarajan
Vetrivel Pandiyarajan

Reputation: 646

div{width:100%}
h4{
    font-family: 'Cera GR Medium', Fallback, sans-serif !important;
    font-size: .75rem;
    color: #F38181;
    letter-spacing: .2rem;
    text-align: right;
    margin-right: 100px;
    width:30%;
    float:left;
}

p{
    float:right;
    font-weight: 300;
    font-size: 1rem;
    width: 70%;
}
<div>
<h4>BACKGROUND</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh egestas, consequat dui ac, sagittis dolor. Suspendisse
  mollis ipsum ac orci vulputate interdum. Etiam id laoreet ligula. Sed nec est maximus, lobortis urna sit amet, molestie
  purus. Donec tristique tempus quam, in cursus erat lacinia ut. Duis tempor justo et pharetra laoreet. Phasellus maximus,
  nunc lobortis ultrices maximus, purus justo bibendum erat, ut tincidunt elit urna eu purus. Donec at mauris pretium, pulvinar
  mi at, pretium velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut nulla eu justo </p>
 </div> 
<div>
    <h4>SKILLS</h4>
</div>

Upvotes: 0

Related Questions