Выравнивание div-центра рядом друг с другом с valign: top

Question

Взгляните сюда http://www.basenharald.nl/3d. Для домашней части я надел некоторые черные рамки, чтобы вы могли видеть, что я имею в виду.

Проблема: Мне нужно расположить 2 блока (блок "эй" и правую часть) рядом друг с другом в центре и расположить их отдельно оттуда. Логическая вещь, которую нужно сделать, это использовать display: inline block. Теперь проблема в том, что он не оценивает top, поэтому я не могу расположить их с полями.

В основном я хочу расположить часть "эй" немного влево, а часть "вправо" немного вправо и тат вниз.

Каков наилучший способ сделать это? Это должно быть сосредоточено все время причина эффекта перспективы и решений. Надеюсь, я достаточно ясен, иначе просто спроси.

Это часть CSS, о которой я говорю:

#home-welkom { text-align:left; width: 465px; margin: 360px 400px 100px; 230px; margin: 0 auto; display: inline-block;  color:#787778; font-size:11px; border:1px solid black; }
#home-right { text-align:left; width: 330px; margin: 50px 0px 0 0; position: relative; margin: 0 auto; display: inline-block; border:1px solid black; }

Кроме того, свойство margin не влияет на элементы div *

Answer 1

Вам придется пересмотреть свою стратегию дизайна.Вот несколько указателей:

• Используйте div вместо списков для разметки вашей страницы (списки удобны для меню и т. Д.)
• поля можно использовать только один раз для класса
• используйте div float, чтобы расположить ваши div'ы рядом
• храните ваши javascripts внешне, так что ваш код будет чище

Теперь по вашему вопросу это то, что вы ищетечтобы расположить ваши элементы:

<div id="wrapper" style="position: relative; margin: 0 auto; width: 800px; text-align: left">
<div id="leftcol" style="float: left; width: 400px;">left column</div>
<div id="rightcol" style="float: left; width: 400px;">right column</div>
</div>

Наконец, я бы удостоверился и подтвердил мой код, и вы можете сделать это здесь: http://validator.w3.org/

Надеюсь, это поможет.