Horizontal alignment of inline elements improvement - css

Question

On my page I have two elements in a header area. I would like the first element to be centered in the middle of the header area and a second element that is pushed all the way to the right side of the header area. I achieved the desired effect using this code:
<div id="header-area" style="text-align:center;width:100%;">
<div id="partition1" style="display:inline-block;width:33%;"></div>
<div id="partition2" style="display:inline-block;width:33%;">
<div id="element1" style="display:inline;width:400px;height:100px;">
<h3 style="display:inline;width:400px;">Main title Goes Here</h3><br/><br/>
<p style="display:inline;width:400px;">Subtitle goes here</p>
</div>
</div>
<div id="partition3" style="display:inline-block;width:33%;text-align:right;">
<div id="Element2" style="display:inline;width:150px;vertical-align:middle;">
<button onclick="history.back();" style="height:45px;width:100px;">
Back</button>
</div>
</div>
</div>
You will notice I partitioned the header-area into three spaces and aligned the element1 & element2 within their respective partitions. How can I achieve the same layout without partitioning the header-area?

Answer 1

There's several ways to do this. Here are two:
Option #1: Float
The HTML:
<div id="header">
<div class="right">Element on right end</div>
<div class="center">Center-Aligned Element</div>
</div>
The CSS:
#header {
text-align: center;
}
#header div.center {
margin: 0 auto;
text-align: center;
width: 30%;
}
#header div.right {
float: right;
text-align: right;
}
Option #2: Position absolute
The HTML:
<div id="header">
<div>Center-Aligned Element</div>
<div class="right">Element on right end</div>
</div>
The CSS:
#header {
text-align: center;
}
#header div {
text-align: center;
width: 30%;
margin: 0 auto;
}
#header div.right {
position: absolute;
top: 0;
right: 0;
text-align: right;
}
Example Using Your Elements:
The HTML:
<div id="header">
<h3>Main Title Goes Here</h3>
<p>Subtitle Goes Here</h3>
<button>Element on right end</button>
</div>
The CSS:
#header {
text-align: center;
}
#header h3,
#header p {
margin: 0 auto;
text-align: center;
width: 30%;
}
#header button {
position: absolute;
top: 0;
right: 0;
}