CSS 3 Столбец Нижний колонтитул (Столбцы смещены)

Итак, я написал очень простой 3-разрядный макет колонтитула, который ДОЛЖЕН работать. Но у меня разные результаты в разных браузерах.CSS 3 Столбец Нижний колонтитул (Столбцы смещены)

CSS-:

#footer{ 
width:980px; 
height: 150px; 
padding: 10px; 
font-size: 12px; 
background-color: #94171b; 
color: #fff; 
} 

#footer_left{float:left; width:300px; text-align:left; border: 1px solid;} 
#footer_middle{width:300px; text-align:left; border: 1px solid;} 
#footer_right{float:right; width:300px; text-align:left; border: 1px solid;}

HTML-

<div id="footer"> 
    <div id="footer_left"> 
    <b>SITE NAVIGATION</b><br> 
     <a href="/dev/site/">Home</a><br> 
     <a href="/dev/site/about.php">About</a><br> 
     <a href="/dev/site/dining.php">Food</a><br> 
     <a href="/dev/site/drinks.php">Drinks</a><br> 
     <a href="/dev/site/">Contact</a> 
     </div> 
     <div id="footer_middle"> 
     <b>CONNECT WITH US SOCIALLY</b><br> 
     http://www.facebook.com/tbd 
     http://www.twitter.com/tbd 
     http://www.instagram.com/tbd 
     http://www.youtube.com/tbd 
     </div> 
     <div id="footer_right"> 
     &copy;2013 Site. All rights reserved<br><br> 
     Support Local Business 
     </div> 
</div>

Вот что я получаю в Chrome: Chrome Error

И вот что я получаю в IE9 IE9 Error

С как сима как это, он должен работать (теоретически), но это не так. В одной строке должно быть 3 столбца по 300 пикселей. На данный момент вам нужен свежий набор глаз. ТИА!

источник

2013-08-20 rws907

Ваше решение HTML всегда будет давать разные результаты в разных браузерах.

Я исправил ваш текущий HTML и CSS, чтобы дать правильную трехколоночную раскладку. Я добавил float:left ко всем элементам.

Вот jsFiddle: http://jsfiddle.net/HhCYh/

Лучшее решение:

Лично для моих собственных макетов столбцов HTML, я использую эту HolyGrail 3 - расположение колонок, который работает удивительный во всех браузерах, даже в IE.

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Взгляни. Это требует дополнительной HTML-разметки в файле, но если вы хотите использовать кросс-браузерное решение в Chrome и IE, это лучшее решение.

Успехов Киру

источник

2013-08-20 00:37:22 kirushanths

Спасибо за скрипку. Он отлично работал в Chrome и FF, но в IE все DIVS сложены. Я рассмотрю решение Holy Grail и посмотрю, поможет ли это. – rws907

@ rsmith84 Спасибо за верность и правильный ответ! :) – kirushanths

Я могу просматривать скрипт в IE, и это прекрасно, но когда я копирую и вставляю его, чтобы заменить код, который у меня был, все divs укладываются друг на друга друг на друга. Есть идеи? – rws907

Все ваши divs должны быть плавающими, чтобы делать то, что вы ищете.

Попробуйте это, она хорошо работает для меня на jsfiddle:

#footer_left{float:left; width:300px; text-align:left; border: 1px solid;} 
#footer_middle{float:left; width:300px; text-align:left; border: 1px solid;} 
#footer_right{float:left; width:300px; text-align:left; border: 1px solid;}

Учитывая то, что у вас было, Chrome делает именно то, что вы попросили его показать, в то время как IE9 был свой 2-й DIV в середине без причины ,

источник

2013-08-20 00:33:44 Sugar

CSS 3 Столбец Нижний колонтитул (Столбцы смещены)

ответ

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