CODEWITHSUNDEEP
htmlcsscss-floatcss-position
ned
ned

Reputation: 13

Positioning and aligning text in CSS/HTML

I am new to HTML and CSS and am having trouble positioning and aligning simple text. I am trying to put the text on the right half of the page and have the text be lined up vertically along the first letter of every line. Right now, the header is all the way on the right side of the page, half cut off. The rest of the the rest of the text is not stacked up on top of one another. Rather, there is one block of text on the left, with the other two stacked on top of each other on the right. I have been stuck on this for hours and have read every article on positioning and alignment, but I can't seem to get it. Thanks for the help!

<div class="aboutme"><h3 id="hello">Header</h3></div>
<div class="aboutme"><p id="school">text</p>
</div>
<div class="aboutme"><p id="personal">
    text</p>
</div>
<div class="aboutme"><p id="thanks">
    text</p>
</div>

.aboutme > *{
font-family: Avenir Next;
display: inline-block;
text-align:left;
float:left;
margin: 0.5em 0.5em 0.5em 0.5em;
position:relative;
left:4em;
}

#hello{
font-size: 3em;
color: #282828;
right: 3.47em;
font-weight: lighter;
position:relative;
text-align: left;
float: right;
margin: 1em 1em 0em 1em;

}

#school {
width: 30em;
clear:right;
}

#personal {
width: 30em;
clear:right;
}
#thanks {
width: 30em;
clear:right;
}

Upvotes: 0

Views: 47

Answers (1)

Taylor
Taylor

Reputation: 773

You need to add margin-left: 50% to the about me class and delete the other positioning you have added.

.aboutme > *{
font-family: Avenir Next;
display: block;
margin-left: 50%
}

#hello{
font-size: 3em;
color: #282828;
font-weight: lighter;

}

#school {
width: 30em;
}

#personal {
width: 30em;
}
#thanks {
width: 30em;
}
<div class="aboutme"><h3 id="hello">Header</h3></div>
<div class="aboutme"><p id="school">text</p>
</div>
<div class="aboutme"><p id="personal">
    text</p>
</div>
<div class="aboutme"><p id="thanks">
    text</p>
</div>

Link to JSFiddle: https://jsfiddle.net/dLy932Lh/

EDIT: Adding a div to the left side

#leftHalf {
  display: inline-block;
  width: 50%;
  height: 200px;
  padding: 0;
  margin: 0;
}

#rightHalf {
  display: inline-block;
  width: calc(50% - 10px);
  height: auto;
  padding: 0;
  margin: 0;
  background-color: #FFF;
}
.aboutme > *{
font-family: Avenir Next;
display: block;
}

#hello{
font-size: 3em;
color: #282828;
font-weight: lighter;

}

#school {
width: 30em;
}

#personal {
width: 30em;
}
#thanks {
width: 30em;
}
<div id="container">
  <div id="leftHalf">

  </div>

  <div id="rightHalf">
    <div class="aboutme">
      <h3 id="hello">Header</h3>
    </div>
    <div class="aboutme"><p id="school">text</p>
    </div>
    <div class="aboutme">
      <p id="personal">text</p>
    </div>
    <div class="aboutme">
      <p id="thanks">text</p>
    </div>
  </div>
</div>

It is important to have the display set to inline-block for the left and right divs so that they can both be on the same line (hence the inline) and they can have heights and widths (hence the block).

Put any content you want on the left side of the page in the left div and make sure that it's width is not more than 50%.

I hope this solution works for you!

Upvotes: 1

Related Questions