DIV не будет выравниваться, попадает ниже содержимого

Я построил этот сайт на http://edge.directiongroup.co.uk/, и на главной странице вы можете увидеть, что правый div-класс «.sidebar» как-то толкается.DIV не будет выравниваться, попадает ниже содержимого

На другой странице http://edge.directiongroup.co.uk/content-marketing/ нет проблем.

Это похоже на #edge_header на главной странице, но я не могу понять, что мне нужно изменить, чтобы сделать правильный .sidebar div правильно размещенным на обеих страницах.

CSS-за #edge_header, который, как представляется, причиной проблемы здесь: -

#edge_header { 
background: url("images/edge_header.png") no-repeat scroll center bottom rgb(255, 255, 255); 
width: 618px; 
height: 318px; 
float: left; 
}

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

Спасибо!

источник

2013-12-06 Tim

если вы уменьшите свою ширину, это устранит проблему? Можете ли вы также опубликовать код для боковой панели? – webdad3

Он будет плавать влево, только если есть пробел, ваш пример требует 618 пикселей пространства слева, который не используется другим элементом, даже пробелом. Вы пытались изменить порядок элементов html? Использовать инструменты браузера для проверки пространства, используемого его соседями? Проблема, вероятно, связана с братом. Можете ли вы опубликовать siblings css? – Wayne

Вам необходимо разместить .sidebar до .edge_header в вашем HTML, например.

http://linenwoods.com/images/capture.png

источник

2013-12-06 18:28:36 user3072619

Даже положить его непосредственно перед '.main_content'. – bunndan

Я просто сделал то же самое.Объяснение: Поскольку ваша боковая панель плавает справа, а остальные divs float остаются, это не проблема, если вы не хотите, чтобы боковая панель была последней в исходном коде, и в этом случае упаковка заголовка и содержимого внутри другого div, который плавает, позволит вам сделай это. – Popnoodles

Отлично, спасибо! :) – Tim

Похоже, что это связано с тем, как настроено плавающее - #edge_header div, который нажимает боковую панель вниз (я установил ее для отображения: нет, и проблема исчезнет). Попробуйте поместить заголовок # в главный контент div?

источник

2013-12-06 18:27:47 essmahr

Можете ли вы показать рабочий пример? – Popnoodles

Вы, кажется, этот <div> структуру на месте в своем основном содержании:

<div class="edge_header"></div> 
<div class="main_content"></div> 
<div class="sidebar"></div>

Выпуск edge_header принимает прецедент над sidebar в DOM. Таким образом, он является плавным, но он плавает после рендера edge_header.

Этот тип проблем с выравниванием с поплавками является общим & maddening. У всех разные методы компоновки CSS. Для меня лучшим решением было бы создать две обертки <div> элементы & гнездятся здесь <div> элементов. Один для основной области. И один для боковой панели. Я называет их main_wrapper и sidebar_wrapper для этого примера. Таким образом, ваша структура будет выглядеть примерно так:

<div class="main_wrapper"> 
    <div class="edge_header"></div> 
    <div class="main_content"></div> 
</div> 

<div class="sidebar_wrapper"> 
    <div class="sidebar"></div> 
</div>

Просто имейте поплавок аналогично другим. И таким образом, содержимое в main_wrapper будет выделено из содержимого в sidebar_wrapper.

Причина, по которой я предпочитаю это, это сохранение содержимого семантически текущим способом, который можно прочитать, если/когда вы его отлаживаете. И, по моему опыту, такая техника обертывания <div> работает хорошо, поскольку проблемы с совместимостью между браузерами и платформами идут.

источник

2013-12-06 18:35:34 JakeGould

DIV не будет выравниваться, попадает ниже содержимого

ответ

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