Почему мой контент переполнен из моего контейнера div?

Я чувствую себя очень глупо, спрашивая об этом, потому что он кажется таким основным, но по какой-то причине высота моего контейнера div не расширяется, чтобы разместить div внутри. Я строю настраиваемую страницу на Tumblr с моими контактными данными (заметьте: не на странице index/permalink, а на отдельной странице), и я использовал divs как своего рода временную таблицу, потому что теги html-таблицы, похоже, не работают на настраиваемых страницах на Tumblr.Почему мой контент переполнен из моего контейнера div?

[Стиль атрибуты для контейнера DIV (ID: Post). Унаследована от тех, для PermaLink страниц]

Все соответствующие CSS взяты из темы редактора:

#cent{ 
background-color:#FFE5E5; 
padding:5px; 
position:static; 
width:800px; 
margin: 0px auto; 
} 

#post{ 
background-color:#fff; 
border:10px ridge #ff0000; 
float:none; 
width:700px; 
margin: 2px auto; 
padding:10px; 
} 

.Division{ 
float: left; 
width: 300px; 
margin-left: 10px; 
margin-bottom: 10px; 
padding: 5px; 
font-weight: bold; 
} 
.Division2{ 
float: left; 
margin-left: 0px; 
margin-bottom: 10px; 
padding: 5px; 
}

HTML на Контакты страница:

<div id="cent"> 
<div id="post"> 
<div class="Division">Telephone Number:</div> 
<div class="Division2">+6012-3456789</div> 
<br/> 
<div class="Division">E-Mail Address:</div> 
<div class="Division2">[email protected]</div> 
<br/> 
<div class="Division">Address:</div> 
<div class="Division2">Line 1 <br />Line 2 <br />Line 3 <br />Line 4</div> 
</div> 
</div>

О, и я сделал скрипку вещь здесь: http://jsfiddle.net/Yelrihs36/wkCQR/ Так что же я делаю не так? Я чувствую, что ответ на самом деле прост и смотрел на меня прямо в лицо, и я буду бить себя, когда узнаю, что это такое ...

источник

2013-11-24 Yelrihs36

Поможет добавить высота: 162px; на #post? – NoChance

@ EmmadKareem смешно, что на самом деле ... Наверное, это будет мой план резервного копирования, если я этого не пойму. Если бы я решил добавить больше информации, мне пришлось бы постоянно находить новые измерения, но, по крайней мере, это работает :) Спасибо – Yelrihs36

В этом случае я бы рекомендовал использовать таблицу. Диверс отбрасывается из-за ваших поплавковых левых утверждений.

Эффект будет таким же, и будет намного проще программировать и будет легче понять, если кто-то еще должен видеть ваш код. Я потратил много часов на использование div, float и display, пытаясь заставить div работать как таблица. Я просто не думаю, что это того стоит.

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

источник

2013-11-24 21:31:34

Вы должны изменить #post плавать: левый

#cent{ 
background-color:#FFE5E5; 
padding:5px; 
position:static; 
width:800px; 
margin: 0px auto; 
} 

#post{ 
background-color:#fff; 
border:10px ridge #ff0000; 
float:left; 
width:700px; 
margin: 2px auto; 
padding:10px; 
} 

.Division{ 
    float: left; 
    width: 300px; 
    margin-left: 10px; 
    margin-bottom: 10px; 
    padding: 5px; 
    font-weight: bold; 
} 
.Division2{ 
    float: left; 
    margin-left: 0px; 
    margin-bottom: 10px; 
    padding: 5px; 
}

corrected fiddle

источник

2013-11-24 21:57:51 vals

Почему мой контент переполнен из моего контейнера div?

ответ

Смежные вопросы