Question

I’ll preface this question by stating I have historically used tables for my HTML formatting and am fairly good at getting it to look the way I’d like… I am aware that tables are meant for “tabular data” and not formatting. I always get a bit frustrated when I try to do it the “right way”, so today I am seeking some help.

<div style="width: 90%;">

  <div style="width: 50%; height: 75px; vertical-align: middle; float: left;">
    <a href="a.html" style="margin: auto 0px auto 0px">
      <img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" />
    </a>
    <a href="a.html" style="margin: auto 0px auto 0px;">A Link</a>                        
  </div>

  <div style="width: 50%; float: right;">
    <a href="b.html">B Link</a>                        
  </div>

</div>

As you can see from my attempts above, I’d like for the image link and the 2 text links to all line up along the same horizontal line (i.e. text links at the center of the image). Depending on how wide the parent div is I’d like the A img/link and B link a reasonable distance from one another. I’d also like for the divs with the “float: left” and “float: right” styles to not extend south beyond the border of the parent div (for some reason it is doing that to me in firefox with the above code).

Please help set me straight? Am I the only one who finds “the right way” of formatting things to be a big pain in the rear? I’m hoping I’m missing something big that if corrected will get me going down the right path.

===============

Update, thanks for the comments, I went to jsfiddle and fiddled a table-based solution:

   <table style="width: 90%; margin: 0px auto 0px auto;">
        <tr>
            <td style="width: 50%;"><a href="a.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /></a><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
            <td style=""><a href="b.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /></a><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td>
        </tr>
    </table>

Yields the desired layout:

I think it must be my misunderstanding/usage of floats and positions that always stings me when I try div-based layouts.

Answer 1

Personally I’d do it like this – http://jsfiddle.net/spacebeers/nWNPm/7/

.magLink {
        list-style: none; 
        height: 50px;
        float: left;
        margin: 0 50px 0 0;
}

.magLink li {
        float: left;
        height: 50px;
        display: table;
}

.magLink li a {
        height: 50px;
        display: table-cell;
        vertical-align: middle;
}


<ul class="magLink">
    <li><a href="#"><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></a></li>
    <li><a href="#">Link A</a></li>
</ul>

You can just copy the <ul> to have more than one. Just adjust the right margin to space them out how ever you want. I’ve set up examples of single link, multiple links and links with extra styling for in in the JSFIddle.

EDIT:

JSFiddle’s running pretty badly so here’s an image of the output in case it’s not working.

Vertical alignment can be a real pain in CSS but tables for layout have had their day man. Let them live out their days being used for tabular data in peace.