Форум Сайтостроение Веб-строительство

[Верстка] CSS: Div "наезжает" на Div

DeL Esprit
На сайте с 27.01.2010
Offline
223
DeL Esprit
15373

Помогите с правильным отображением.

Конструкция: 


<div id="postbox"> 

      <div class="infoshort"><h1>Титл 1</div> 

<div style="display:inline;"><p><img align="left" src="картинка.jpg" alt='АЛЬТ' title='ТИТЛ картинки'  />Текст11</p></div>   

<div class="more" align="right">Подробнее </div> 

  </div> 



<div id="postbox"> 

      <div class="infoshort"><h1>Титл 2</div> 

<div style="display:inline;"><p><img align="left" src="картинка.jpg" alt='АЛЬТ' title='ТИТЛ картинки'  />Текст222</p></div>   

<div class="more" align="right">Подробнее </div> 

  </div>

Если мало текста в Текст11, на вид получается вот так - http://bit.ly/v1xtgN

как сделать что бы Div шел ниже предыдущего? (надеюсь меня поняли)

Тестирую облачный майнинг - узнаем развод или нет. - окупаемость 3 месяца? мелкие суммы (https://goo.gl/aPWmoj) | майнинг Monero, минимум $830 (https://goo.gl/3XivbP) Биржи (ввод/вывод) - на Приват (https://goo.gl/CGZTnD), на Payeer, Capitalist, Advcash, Qiwi... (https://goo.gl/eejAgs)
[Удален]
#1

DeL Esprit, для начала h1 закройте и картинку inline сделать не получится

DeL Esprit
На сайте с 27.01.2010
Offline
223
DeL Esprit
#2
burunduk:
DeL Esprit, для начала h1 закройте и картинку inline сделать не получится

спсб, в оригинале н1 закрыт - это уже тут ошибся.

может вместо дива тогда таблицу сделать?

[Удален]
#3

DeL Esprit, сделайте блок с картинкой float:left

а после br с {clear:both;}

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#4

Да не нужно там никаких br с clear:both.

Для <div id="postbox"> назначить overflow:hidden; и заодно убрать из html все deprecated атрибуты.

R
На сайте с 17.11.2011
Offline
22
rommer
#5

без анализа классов что-то сказать не могу.

Если чисто по элементам, то должно выводиться правильно.

А если выводится неправильно, значит что-то в классах, например игры с float-ами

Кто подскажет, как правильней? <br clear="all"> или <br style="clear:both;">?

домашняя страница - google.com.ua
Валидация сайта блок div отображать снизу как выровнять внутри дива
DeL Esprit
На сайте с 27.01.2010
Offline
223
DeL Esprit
#6
Olldman:
Да не нужно там никаких br с clear:both.
Для <div id="postbox"> назначить overflow:hidden; и заодно убрать из html все deprecated атрибуты.

написал:

<style type="text/css"> 
#postbox div {
  overflow:hidden; 
  }
</style>

все равно отображение неправильное. (или я что-то не так прописал?)

---------- Добавлено в 18:15 ---------- Предыдущее сообщение было в 18:13 ----------

Блин, понял где ошибся.

надо было вот так:

<style type="text/css"> 
#postbox {
  overflow:hidden; 
  }
</style>

Спасибо, Olldman

P
На сайте с 23.12.2011
Offline
0
pastyh
#7

В Мазиле страница отображается вот так: www.mainsolnce.ru/stihi-1.html , прижимает среднюю колонку вправо.

В стилях прописано так:

#content{

margin-bottom:35px;

margin-right:270px;

margin-left:270px;

background:#ffffff;

}

В Explorere всё корректно. Подскажите как "сказать" firefox что нужно растягивать колонку от правой до левой? А не просто "обнимать" текст.

Уменьшился поисковый трафик? Ищем Яндекс позволил управлять дизайном Директ тестирует показ уточнений
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#8

pastyh,

1. обозначить тип документа (!DOCTYPE) и не обрезанный, а полный, как положено.

2. для id main нужно обозначить ширину, т.к. элемент имеет обтекание, например 80%(смотри по общей ширине).

P
На сайте с 23.12.2011
Offline
0
pastyh
#9
Olldman:
pastyh,
1. обозначить тип документа (!DOCTYPE) и не обрезанный, а полный, как положено.
2. для id main нужно обозначить ширину, т.к. элемент имеет обтекание, например 80%(смотри по общей ширине).

#page{

height:600px;

width:100% auto;

background-color:transparent;

}

#header{

margin:20px;

height:100% auto;

width:100% auto;

background:#ffffff;

}

#main{

float:right;

width:100% auto;

background;#ffffff;

}

#content{

margin-bottom:35px;

margin-right:270px;

margin-left:270px;

background:#ffffff;

}

#menu{

margin-left:20px;

margin-right:-250px;

float:left;

width:230px;

background:#ffffff;

}

#mani{

margin-right:20px;

margin-left:-250px;

float:right;

width:230px;

background:#ffffff;

}

#footer{

margin:20px;

clear:both;

height:70px;

width:100% auto;

background:#ffffff;

}

main 100%?

P
На сайте с 23.12.2011
Offline
0
pastyh
#10

Проблемку решил тем, что вставил P.S внизу колонки, оно растянуло её. Если конечно это можно назвать решением ☝

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий