CODEWITHSUNDEEP
htmlcss
Jet
Jet

Reputation: 13

Two bodies of text on one line

I'm trying to make my user page on GitHub. I planned it to go out having text on the left side of the screen, and text on the right side of the screen. The code right now looks like this.

<h2>
    <div style="text-align: left;">About Me</div>
    <div style="text-align: right;">My Stuff</div>
</h2>
<h3>
    <div style="text-align: left;">Name: Jet "Humding3r" Geronimo<br />
                                   Age: 11<br />
                                   Hobbies: Coding, Gaming, Music</div>
</h3>
<h3><div style="text-align: right;"><a href="https://github.com/Humding3r/number-guessing-game">Number Guessing Game</a></div>

Here's what it looks like right now. https://gyazo.com/cf4eb2c3f0d92eec714c8d926cf38af6

Upvotes: 1

Views: 96

Answers (2)

mlegg
mlegg

Reputation: 832

Use a responsive grid like this: 

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF TWO  */

.span_2_of_2 {
  width: 100%;
}

.span_1_of_2 {
  width: 49.2%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
}

@media only screen and (max-width: 480px) {
  .span_2_of_2,
  .span_1_of_2 {
    width: 100%;
  }
}
<div class="section group">
  <div class="col span_1_of_2">
    <b>About Me</b>
    <p>Name: Jet "Humding3r" Geronimo
      <br /> Age: 11</p>
  </div>

  <div class="col span_1_of_2">
    <b>My Stuff</b>
    <p>Hobbies: Coding, Gaming, Music</p>
  </div>
</div>

Upvotes: 0

Arleigh Hix
Arleigh Hix

Reputation: 10877

The text-align property is for the contents of the element, I think you are trying to get the elements to float on either side. Also separate your elements, and not everything is a heading they have a special purpose read this.

<div id="left-panel" style="float:left;text-align:left">
  <h2>About Me</h2>
  <div>
    Name: Jet "Humding3r" Geronimo<br />
    Age: 11<br />
    Hobbies: Coding, Gaming, Music</div>
  </div>
</div>
<div id="right-panel" style="float:right;text-align:right;">
  <h2>My Stuff</h2>
  <div>
    <a href="https://github.com/Humding3r/number-guessing-game">Number Guessing Game</a>
  </div>
</div>

Upvotes: 1

Related Questions