верстка блеать
 

привет
считаю, что css html знаю неплохо, но отдельно
от верстки блеать

надо сверстать такоя :
http://share.axure.com/4AJFD7/Action...signRefer.html

я набросал файл со структурой(во вложении)
нужен css
(верстка до таблицы)

гуру верстки и дизайна подсобите

посоветуйте книжку по css, дивной и валидной верстке
(не по самому css'у, его знаю, а именно по верстке, те как красиво верстать :))

<div style="width: 600px">
    <div>
       <h2>Assign / Refer Action Item</h2>
       <span>
            <a href="#">Close
                <img src="u22_normal.png" width="25px" height="25px" style="vertical-align: middle;" >
            </a>
       </span>
    </div>
    <hr>
    <div>
        <label for="staffSelect">Staff:</label>
        <select id="staffSelect">
            <option value="">Lastname, Firstname</option>
        </select>
    </div>
    <div>
        <label for="prioritySelect">Priority:</label>
        <select id="prioritySelect">
            <option value="High">High</option>
            <option value="Medium">Medium</option>
            <option value="Low">Low</option>
        </select>
    </div>
</div>

Нужно сверстать как на картинке

<div>
       <h2>Assign / Refer Action Item</h2>
       <span>
            <a href="#">Close
                <img src="u22_normal.png" width="25px" height="25px" style="vertical-align: middle;" >
            </a>
       </span>
    </div>

<a href="#">Close
5	                <img src="u22_normal.png" width="25px" height="25px" style="vertical-align: middle;" >
6

</a>

Ссылку отцентрировать относительно

<h2>Assign / Refer Action Item</h2>

Ссылка с картинкой должна быть справа
(как на картинке)

<div>
        <label for="staffSelect">Staff:</label>
        <select id="staffSelect">
            <option value="">Lastname, Firstname</option>
        </select>
    </div>
    <div>
        <label for="prioritySelect">Priority:</label>
        <select id="prioritySelect">
            <option value="High">High</option>
            <option value="Medium">Medium</option>
            <option value="Low">Low</option>
        </select>
    </div>

Содержимое второго дива должно быть справа напротив содержимого первого дива
если нужно поменяйте структуру html

картинко

Блочные в строчные не вставляются.

А зачем ты их тогда знаешь?

Я думаю, что для такого лучше всего читать стандарты в3к. В книжках, чт оя читал, обычно просто общая философия и некоторые приемы.

Во-первых сейчас не делят элементы на блочные/строчные. Это зависит от css. А во-вторых что тут блочный элемент, а что - строчный?

Как то вы уж грубо начали вести дискуссию и склонен думать что уже не кто не захочет помочь вам.
Ну а если внимательно посмотреть предыдущее сообщение, то явно указано что:
Сообщение от torsar
<span>05 <a href="#">Close
Блочные в строчные не вставляются- это верно.(Человек имел ввиду что спан строчый, а тег а -блочный.),но
<span> - это тег для определения строчных элементов.
<a>- как и спан встроенный тег.
Поэтому как и в спан можно вкладывать тег а, так и на оборот.
Вот с <p> or <div> так не получиться, в блочных тегах можно располагать только строчные но не на оборот!
От css -это не зависит, с помощью css можно сделать что бы блочный элемент отображался как строчный, но от этого он не станет строчным.
Хороший ресурс для изучения http://www.w3schools.com/