Как сделать правильно?

[tema]

Подскажите, как правильно написать код, чтобы объекты ( текст и изображение ) располагались именно таким образом? Я просто не знаю как одну область разбить например на две вертикальные части, где в одной, как на скрине, слева был бы текст, а в другой, справа, было бы изображение!

Заранее благодарен!

[sammasati]

Вот, пара вариантов.

Кликабельная картинка, текст:

<div>
<p>Текст</p>
<a href="#"><img src="image.jpg"></a>
</div>

div {
  width: 300px;
  overflow: hidden;
}
img{
  float: right; 
}

Не кликабельная картинка, заголовок:

<h1>Заголовок</h1>

h1 {
  background: url(image.jpg) right top no-repeat;
}

Список:

<ul>
  <li><p>Текст/заголовок</p></li>
  <li><img src="image.jpg"></li>
</ul>

ul {
  list-style: none;
}
li {
  display: inline-block;
  width: 50%;
}

А вообще, тут могут быть разные нюансы, в зависимости от конкретной задачи. Если надо именно две колонки, то http://htmlbook.ru/layout

Edited December 18, 2011 by sammasati

[Gaspode]

<li>
Текст/заголовок</li>

в li нельзя вкладывать блочные элементы.

По этому коду получится нечто следующее:

<li></li>
Текст/заголовок<li></li>

Edited December 18, 2011 by Gaspode

[tema]

Вообще я хотел сделать кликабелым и заголовок и картинку! Я попробовал все ваши варианты, но не один из них у меня не получился! Так как надо текст и картинка не отображаются! Либо друг под другом, либо картинка чуть правее, но все равно ниже текста! Мне нужно чтобы они были ровно друг на против друга, точно так как на скриншоте! Если кто знает как это сделать, напишите пожалуйста поподробнее CSS и HTML отдельно и как надо! Потому что я только начинаю этим заниматься и особо ничего не понимаю!

Edited December 18, 2011 by tema

[sammasati]

  On 12/18/2011 at 10:30 AM, Gaspode said:

<li>
Текст/заголовок</li>

в li нельзя вкладывать блочные элементы.

По этому коду получится нечто следующее:

<li></li>
Текст/заголовок<li></li>

Спецификация в тобой не согласна

<!ELEMENT LI - O (%flow;)*             -- list item -->
<!ENTITY % flow "%block; | %inline;">

Наоборот! В параграфы нельзя вставлять списки.

[Gaspode]

А, да, пардон, попутал.

[sammasati]

http://jsfiddle.net/beCFk/

[tema]

Во, Спасибо