выравнивание div и проблемы с float

0

Я воссоздаю сайт AACC (страница здесь) и столкнулся с некоторыми проблемами, пытаясь выровнять столбцы посередине под названием "Национальная инициатива", "Ведущее продвижение" и "Программа премий". В моем исходном коде, который можно просмотреть с помощью css здесь, я создал его так, чтобы баннер с изображением клинтона плавал слева от области входа и боковой панели. Однако, если я использую ясно: оба, первый столбец (который отображается в нижней части моей страницы), остается под боковой панелью справа. Я не совсем уверен, как это исправить, возможно, я просто помещаю ясное свойство в неправильное место в коде или что-то еще, что может быть. Просто можно было использовать свежий набор глаз.

Вот код CSS, где я думаю, что проблема может быть исправлена:

#banner {float: left; width: 730px;}

#logbar {
background-color: rgb(95, 193, 47); color:#FFFFFF; padding: 3px; margin-left: 740px; width: 240px; height: 130px;}

#sidebar{margin-left: 740px; width: 240px; height: 700px; padding:1px; background-color: #66CC66; margin-top: 3px;}

#col1{float:left; width:236; height;300px; background-color:rgb(204, 227, 251);}
  • 0
    Мне кажется, все хорошо .. Не могли бы вы показать нам скриншот? В каком браузере вы столкнулись с этой проблемой - также сообщите нам версию браузера и ОС, в которой вы находитесь.
  • 0
    Вот проблема: s12.postimg.org/k024g05zx/mywork.jpg и вот как это должно выглядеть: s17.postimg.org/s8pdkilgv/original_site.jpg Я использую FF, но также пробовал в IE. Не думайте, что совместимость браузера - это проблема. Также я использую Vista 64 бит
Показать ещё 4 комментария
Теги:
placement

1 ответ

0
Лучший ответ

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

#col1 {
  top: 420px;           /* Add this */
  position: absolute;   /* And this */
  width: 236px;
  background-color: rgb(204, 227, 251);
}

Однако это действительно просто хак. Вы должны перестроить свой HTML. AACC не является хорошим примером - они используют таблицы для их компоновки. Посмотрите, как stackoverflow создает свою боковую панель для лучшего примера.

Поделиться
  • 0
    Спасибо за помощь. Да, это, безусловно, самый сложный HW, который у нас был, тем более что его можно довольно легко воспроизвести в Dreamweaver, просто создав таблицу и объединив столбцы и строки. Я знаю, что абсолютное позиционирование является последним средством, но я думаю, что в этом случае это будет лучший курс действий. Не хочу перекодировать все остальное, было бы очень много времени. Еще раз спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню