Непонятки с div ами.

[sanj]

Извиняюсь за частичное повторение темы, но если не было причин - повторять бы не стал.
У меня есть дизайн и мне надо сделать сторой столбез - а ничего толком не получается. Вот собственно сама проблема. Ниже прилагаю файлы

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Там скрин что надо сделать - помогите пожалуйста реализовать такое дело - а то весь день провозился - а толку никакого.
И если не трудно - расскажите как это реализовали, что бы в следующий раз не беспокоить.

 

[pslava]

Впиши в таблицу с 2 столбцами, конечно получится смешанная верстка, но так быстрее

 

[sanj]

Так я уже пробовал и такой вариант - не получается. Тут только надо как то через div верстать.
Может еще есть какие варианты?

 

[JJ bOUN]

на сколько я понял в этом текстовом поле, которое ты хочешь добавить ширина и высота фиксирована? ли она будет меняться? если фиксированно, то проще всего решить с помощью абсолютного позиционирования.

<div id="latest-post" class="post" style="position: relative">
<div style="position:absolute; left: 780px; top:0; width:190px; height: 100px;">Text</div>
<p class="byline">
.
.
.

также можно сделать с помощью плавающих элементов, основной колонке назначь float: left; правой float: right; ну и конечно же ширину для каждой колонки.
кстати, почему ты к каждому элементу применяешь margin: 0 auto;? не проще ли (и чище для css) сделать один элемент который будет равнятся по середине:

#wrapper {
margin: 0 auto;
width: ***px;
}

<div id="wrapper">
содержимое
</div>

 

[dralex]

Вот мой вариант решения, сайт не резиновый и поэтому решение будет только статическим, в моем примере ширина поля для текста = 180 пикселей !
Как реализовать:
1. Найти <div id="latest-post" class="post">
2. Ниже добавить
<div style="float:right; margin-right:-200px; width:180px; font-size:10px;">
текст
</div>
--------
сильно не пинайте, я не мастер

 

[sanj]

Вот мой вариант решения, сайт не резиновый и поэтому решение будет только статическим, в моем примере ширина поля для текста = 180 пикселей !
Как реализовать:
1. Найти <div id="latest-post" class="post">
2. Ниже добавить
<div style="float:right; margin-right:-200px; width:180px; font-size:10px;">
текст
</div>
--------

Хороший вариант. Мне понравился. А как в этом блоке текст выровнять и по ширине и по высоте. Я смог только но ширине - а вот по высоте никак не получается - как тут выровнять по ширине и высоте?

 

[JJ bOUN]

ну вообще, чтобы выровнять по вертикали текст в блочном элементе надо написать такой вот селектор:

div.right {
    display: table-cell;
    vertical-align: middle;
}

первое свойство задает поведение элемента, как ячейки таблицы, второе само выравнивание текста по вертикали. Только этот метод не работает в IE<=7. Там надо прибегать к хакам. В общем поищи в гугле по словам "вертикальное выравнивание в div"
Для выравнивания по горизонтали text-align:center;

 

[sanj]

Спасибо, что помогли - дело продвинулось отлично. Последний вопрос:
по вашим советам я сделал блок

<div id="latest-post" class="post" style="position: relative">
<div style="position:absolute; left: 779px; top:36px; width:190px; height: 360px; background-color: #BBB082;">
  <p>тут всяко разно</p>
  </div>

задача:
как сделать так, что бы когда я в этом блоке пишу текст при приближении текста к границам блока, текст перемещался на следующую строку (а то у меня сплошной строкой фигачит).
Заранее благодарю.

 

[inFamous]

Спасибо, что помогли - дело продвинулось отлично. Последний вопрос:
по вашим советам я сделал блок

<div id="latest-post" class="post" style="position: relative">
<div style="position:absolute; left: 779px; top:36px; width:190px; height: 360px; background-color: #BBB082;">
  <p>тут всяко разно</p>
  </div>

задача:
как сделать так, что бы когда я в этом блоке пишу текст при приближении текста к границам блока, текст перемещался на следующую строку (а то у меня сплошной строкой фигачит).
Заранее благодарю.

не должно такого быть, разве только если элементы текста не разделены пробелами, может быть ты когда проверял просто ввел качу символов неразделенных пробелами?

 

[JJ bOUN]

вообще-то да, не должно такое получатся, если там нормальный текст, а не одно неразрывное слово.
или ты имеешь в виду, что текст примыкает к границам блока? в этом случае внутренние отступы ставь.
ну а если текст вылазит за границы блока то ставь overflow:hidden; для блока с явно заданной шириной.
опиши подробней проблему, а то непонятно как-то.