Cross-Browser CSS for Left Align and Right Align on The Same Line

Cross-browser CSS for left align and right align on the same line

With container tags:

<div>
  <p style="float: left">stuff on the left</p>
  <p style="float: right">Tstuff on the right </p>
</div>

With inline tags:

<div>
  <span style="float: left">stuff on the left</span>
  <span style="float: right">Tstuff on the right</span>
</div>

Cross-browser CSS for left align, right align AND center align on the same line

<div>
<p style="float: left; width: 33%;">stuff on the left</p>
<p style="float: left; width: 33%; text-align: center">center</p>
<p style="float: right; width: 33%; text-align: right">stuff on the right </p>
</div>

How to align button left and right in the same line?

Use float css rule

.f-l {
    float: left;
}
    
.f-r {
    float: right;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 text-left f-l">
   <button type="button" id="pre_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="previous" >Previous</button>
</div>
                                                                    
<div class="col-md-12 text-right f-r">
    <button type="button" id="next_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="Next" >Next</button>
</div>

CSS: align two element, to the left and right in the same line WHITHOUT floats

You can use some flexbox magic:

h1 {  display: flex;  justify-content: space-between;}

<h1>  <span>Align me left</span>  <a href="">align me right</a></h1>

CSS for left and right align of the first line, with wrapped lines right aligned

LIVE DEMO

HTML

<p>What I want:</p>
<div id="textbox">
        <h3>Old Fashioned</h3>
        <p >Bulleit Bourbon, Raw Sugar, Luxardo Maraschino Cherries, Soda, Orange</p>
        <h3>O'Henry</h3>
        <p>Buffalo Trace Bourbon, Benedictine, Liqueur, Fever Tree Ginger Beer</p>
        <h3>Hemingway</h3>
        <p>Aged White Rum, Fresh Lime &
         Grapefruit Juice, Maraschino Liqueur, Lucardo Maraschino Cherries</p>
        <h3>Irish Coffee</h3>
        <p>Jameson Irish Whiskey, Coffee</p>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
}
#textbox {
    width: 350px;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid #cccccc;
}
#textbox h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size:15px;
    font-weight: 700px;
    text-transform: uppercase;
    float: left;
    text-align:left;
}
#textbox p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-style: italic;
    color: #333;
    text-align:right;
}

Left and Right align text on the same line

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>

How to align div align=left and div align=right on the same line

There are many ways you could achieve this. You can try using floats.
Method 1:

HTML:

<div class="table-holder left-table">
  <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
  <Table striped bordered hover></Table>
</div>
<div class="clear"></div>
<div class="table-holder left-table">
  <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
  <Table striped bordered hover></Table>
</div>

CSS:

.table-holder {
  width:50%;
}
.left-table {
  float:left;
}
.right-table {
  float:right;
}
.clear {clear:both;}
.table-holder table {width:100%;}

Demo

Method 2 (Flex):

.tables-container {  display: flex;  flex-wrap: wrap;}
.tables-container > div {  flex: 0 50%;}.tables-container table {  width: 100%;}
/* --- */table {border:1px solid black;}table th {border:1px solid red;}html, body {  margin:0;  padding:0;}

<div class="tables-container">  <div>    <table>      <tr><th>1</th><th>2Z</th></tr>    </table>  </div>  <div>    <table>      <tr><th>1</th><th>2D</th></tr>    </table>  </div>  <div>    <table>      <tr><th>1</th><th>2B</th></tr>    </table>  </div>  <div>    <table>      <tr><th>1</th><th>2</th><th>3</th></tr>    </table>  </div></div>
<div>other content</div>

CSS text align right while still maintaining equal padding left and right

I hope i solved your problem. I set both padding padding-right:50px and padding-left:50px and still stay right according to your requirement.

Live Working Demo

Result:

---

Related Topics