CODEWITHSUNDEEP
htmlcss
mxmissile
mxmissile

Reputation: 11673

HTML Left and Right Align Elements

To accomplish this I have done this:

<table style="width:100%;">
 <tr>
    <td style="width:50%;text-align: left;">left</td>
    <td style="width:50%;text-align: right;">right</td>
  </tr>
</table>

How could I accomplish this in the simplest fashion (least markup) without using tables? I just want to align 2 elements to the max left and right.

There are hundreds of 2 column layouts out there, but they more aligned for page layout, and seem overkill.

Upvotes: 3

Views: 18334

Answers (2)

Donut
Donut

Reputation: 112815

Something like this:

CSS

<style type="text/css">
#primary {
   width: 100%;
}

.secondary {
   width: 50%;
}

.leftcolumn {
   float: left;
   text-align: left;
} 

.rightcolumn {
   float: right;
   text-align: right;
}
</style>

HTML

<div id="primary">
   <div class="secondary leftcolumn">
      <p>This will be on the left</p>
   </div>
   <div class="secondary rightcolumn">
      <p>This will be on the right</p>
   </div>
</div>

Although I'd change leftcolumn and rightcolumn to something specific to the content that each will contain (in favor of a semantic naming approach to CSS rather than structural).

Upvotes: 3

Allain Lalonde
Allain Lalonde

Reputation: 93328

Some html:

<div class="left">left</div>
<div class="right">right</div>

Some CSS:

.left, .right {
  width: 50%; /* Floated elements technically need a width specified. */
}

.left {
  float: left;
}

.right {
  float: right;
}

Upvotes: 9

Related Questions