HTML форматирование со стилями - просто отказаться от использования таблиц?

Question

Я предрежу этот вопрос, заявив, что я исторически использовал таблицы для своего HTML-форматирования, и я достаточно хорош, чтобы заставить его выглядеть так, как мне хотелось бы ... Я знаю, что таблицы предназначены для "табличных данных" и не форматирование. Я всегда немного расстраиваюсь, когда пытаюсь сделать это «правильным образом», поэтому сегодня я ищу какую-то помощь.

<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>

Как вы можете видеть из моих попыток выше, я хотел бы, чтобы ссылка на изображение и 2 текстовые ссылки были расположены вдоль одной горизонтальной линии (то есть текстовых ссылок в центре изображения). В зависимости от ширины родительского div, я бы хотел, чтобы A img / link и B связывали разумное расстояние друг от друга. Я также хотел бы, чтобы div с стилями "float: left" и "float: right" в not простирался на юг за пределы родительского div (по какой-то причине он делает это со мной в Firefox с вышеуказанным кодом).

Пожалуйста, помогите мне разобраться? Я единственный, кто находит "правильный путь" форматирования вещей большой болью в тылу? Я надеюсь, что мне не хватает чего-то большого, что, если исправить, заставит меня пойти по правильному пути.

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

Обновление, спасибо за комментарии, я пошел в jsfiddle и поиграл с решением на основе таблицы:

   <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>

Возвращает желаемый макет:

Я думаю, что мое недоразумение / использование поплавков и позиций меня всегда раздражает, когда я пытаюсь использовать макеты на основе div.

Answer 1

Лично я бы сделал это так - 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>

Вы можете просто скопировать <ul>, чтобы иметь более одного. Просто отрегулируйте правильные поля, чтобы расположить их как угодно. Я настроил примеры одной ссылки, нескольких ссылок и ссылок с дополнительным стилем в JSFIddle.

EDIT:

JSFiddle работает довольно плохо, поэтому вот изображение вывода на случай, если оно не работает.

Вертикальное выравнивание может быть настоящей болью в CSS, но таблицы для верстки имеют свои преимущества. Пусть они доживут до тех пор, пока их мирно используют для табличных данных.

Answer 2

Из того, что я могу сказать, ваши "поплавки" простираются за пределы родительского div, потому что у вас есть две ширины 50% внутри 90%. Попробуйте установить для них обоих значение 45%. Затем задайте class или id для двух контейнеров с плавающей точкой, установите для них значение position:relative, установите обе ссылки и img в каждом плавающем div на position:absolute и используйте left, right, top, и bottom, чтобы переместить их на место (img и ссылка будут ограничены относительно позиционированным родителем div). Это помогает?

Редактировать

<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 href="a.html" style="margin: auto 0px auto 0px; position:absolute; top:15px;">A Link</a>                        
</div>

<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
<a href="b.html"  style="margin: auto 0px auto 0px; position:absolute; left:50px; top:15px;">B Link</a>
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />                        
</div>

</div>

Это код, эквивалентный разметке вашей таблицы. Я бы использовал jsfiddle, но я получил ошибку 504 ... вероятно, не держал мой рот правильно. :)