Proper alignment for my page title

Question

Hey all,

I'm sure this is a stupid easy question, but with HTML I can never decide the best way to get a desired result... I just really wasn't cut out for web coding.

Anyway... I have a page that I need to display a title with two links on either side of it and I need the title to be centered and use a different font/style than the links.

This is the setup I currently have, ignore the fact that I only have 1 link so far... I need to work out the first one first then worry about the other one

<div style="float:left clear:none width:100%">
<div style="width:20%"><a href="/queryReport.action?currentFacility=<s:property value="previousFacility"/>">Previous Facility</a></div>
<div style="width:20%" class="important-center">Facility <s:property value="currentFacility"/></div>
</div>

.important-center {
    font-size:20px;
    letter-spacing:1px;         
    text-align: center;
    position:center;
    padding: 6px;
    color: #314457;
}

The problem with this is that my link is constantly appearing on top of my title. If anyone can give me some pointers on how I can get this situation fixed I'd appreciate it!

Answer 1

Have you tried using a ul? It should give you the desired result.

Something like:

<div style="float:left; clear:none; width:100%;">
<ul>
  <li><a href="/queryReport.action?currentFacility=<s:property alue="previousFacility"/>">Previous Facility</a></li>
  <li class="important-center">Facility <s:property value="currentFacility"/></li>
  <li><a href="/queryReport.action?currentFacility=<s:property alue="nextFacility"/>">NextFacility</a></li>
</ul>
</div>

#navigation { margin: 0px; padding: 0px; list-style: none; }
#navigation li { padding: 2px; }

Edit: I think melhosseiny has the better solution.

Answer 2

If you want the links to neighbour the title, use this

<div style="text-align: center;">
    <a href="#">Previous Facility</a>
    <span class="important-center">Facility</span>
    <a href="#">Next Facility</a>
</div>

If you want the links to stick to the sides, use this

<div style="text-align: center;">
    <a href="#" style="float: left;">Previous Facility</a>
    <span class="important-center">Facility</span>
    <a href="#" style="float: right;">Next Facility</a>
</div>

CSS

.important-center {
    font-size:20px;
    letter-spacing:1px; 
    padding: 6px;
    color: #314457;
}

See it here.