CODEWITHSUNDEEP
javascripthtmlcss
Ankur Rai
Ankur Rai

Reputation: 297

Text at Left side and Right Side in HTML Page

I want the HTML output similar like this -

My First Sentence                       My Second Sentence

So, my code is -

<h3>
   <span style="float:left;">My first sentence</span>
   <a href="#" style="float:right;text-align:right;">My second sentence </a>
</h3>

and the output was - 

My First SentenceMy Second Sentence

So I added "margin-left: 100px" to the element and then the output was in next line-

My First Sentence                       
                                 My Second Sentence

Please guide me through this.Most probably some other css is overwriting it and I need to know how can I get the view what I want. My current code looks like -

<h3>
   <span style="float:left;">My first sentence</span>
   <a href="#" style="float:right;text-align:right;margin-left: 100px;">My second sentence </a>
</h3>

Upvotes: 2

Views: 28551

Answers (4)

Ankur Rai
Ankur Rai

Reputation: 297

It worked by adding margin-left:80px;. So the final code is -

<h3>
   <span style="float:left;">My first sentence</span>
   <a href="#" style="float:right;text-align:right;margin-left: 80px;">My second sentence </a>
</h3>

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 106028

i see 3 options(you used float already) with display and text-align/text-align-last. The choice is about how much old the browser is that you intend to support

span,
a {
  display: inline-block;
  /* optionnal*/
}


/* newest browser */

h3.flex {
  display: flex;
  justify-content: space-between;
}


/* check it on canisue.com */

h3.tAl {
  text-align: justify;
  text-align-last: justify;
}


/* oldest browsers such as IE8 */

h3.tA {
  text-align: justify;
}

h3.tA:after {
  content: '';
  display: inline-block;
  width: 100%;
}


/* optionnal to not allow wrapping 
h3[class=^ta] {
white-space:nowrap;
}
*/
<h3 class="flex">
  <span>My first sentence</span>
  <a href="#">My second sentence </a>
</h3>
<h3 class="tAl">
  <span>My first sentence</span>
  <a href="#">My second sentence </a>
</h3>
<h3 class="tA">
  <span>My first sentence</span>
  <a href="#">My second sentence </a>
</h3>

Upvotes: 3

Jonny
Jonny

Reputation: 1329

You can just wrap it in a div to keep it in line like this.

 <div style="width:100%; height:2em; float:left;">
 <h3>
 <span style="float:left;">My first sentence</span>
 <a href="#" style="float:left;text-align:left;margin-left: 100px;">My second sentence </a>
 </h3>
 </div>

Upvotes: 0

kchason
kchason

Reputation: 2885

You can create different columns and then left align the text inside them.

.row{
  text-align: left;
  width: 100%;
  display: block;
}

.half-row{
  display: inline-block;
  width: 48%;
  padding: 1%;
  float: left;
}

.clear{
  clear: both;
}
<div class="row">
  <div class="half-row">
    My First Sentence
  </div>
  <div class="half-row">
    My Second Sentence
  </div>
  <div class="clear"></div> <!-- Needed for float handling -->
</div>

Upvotes: 0

Related Questions