Left and Right align text on the same line

Question

Following is displaying two horizontal lines above the text. What I need is one horizontal line above the text and one below the text:

 .alignleft { float: left; } .alignright { float: right; } 

 <div style="width:800px;"> <hr /> <p class="alignleft">To Left: 1024-0038</p> <p class="alignright">To Right: 01-15-131194</p> <hr /> </div> 

Display : One hr should display below the text and should be same width as the other one covering the entire div width.

Answer 1

You can easily maintain the alignment, and replace the <hr> elements by using the div's border, looks a bit cleaner:

 <style> div { border-top: 1px solid gray; border-bottom: 1px solid gray; display: flex; justify-content: space-between; width: 800px; } </style> <div> <p>To Left: 1024-0038</p> <p>To Right: 01-15-131194</p> </div> 

Answer 2

The floats need to be cleared. There are many different ways to do this. One of them is:

<hr style="clear: both"/>

Answer 3

Please try the following:

 .alignleft { float: left; } .alignright { float: right; } hr { clear:both; } 

 <div style="width:800px;"> <hr /> <p class="alignleft">To Left: 1024-0038</p> <p class="alignright">To Right: 01-15-131194</p> <hr /> </div> 

Answer 4

Use a clear:both after the text. Like so:

<style>
.alignleft {
    float: left;
}

.alignright {
    float: right;
}
.clear{
clear:both;
}
</style>
<div style="width:800px;">
    <hr />
    <p class="alignleft">To Left: 1024-0038</p>
    <p class="alignright">To Right: 01-15-131194</p>
    <div class="clear"></div>
    <hr />
</div>

Answer 5

First, float doesn't do what you think it does.

Second, try this:

  #container{
      width:100%
      }
    .alignleft {
      width:50%;
      float:left;
      text-align: left;
    }

    .alignright {
      width:50%;
      float:left;
      text-align: right;
    }
   hr{
     clear:both;
    }

functional example: https://jsfiddle.net/catbadger/0d144khk/1/