HTML formatting with styles -- Just give up and use tables? - html

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 Link
</div>
<div style="width: 50%; float: right;">
B Link
</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%;"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
<td style=""><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /><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><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></li>
<li>Link 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.

Answer 2

From what I can tell, your "floaters" are extending beyond the parent div because you have two 50% widths inside of a 90%. Try setting them both to 45%. Then set a class or an id on your two floater containers, set them to position:relative, set both your link and img within each floating div to position:absolute, and use left, right, top, and bottom to move them into place (the img and link will be confined to the relatively positioned parent div). Does this help?
Edit
<div style="width: 90%;">
<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;">
<a href="a.html" style="margin: auto 0px auto 0px;">
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" />
</a>
A Link
</div>
<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
B Link
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />
</div>
</div>
That is the code equivalent to your table layout.
I would have used jsfiddle but I got a 504 error... probably didn't hold my mouth right. :)