css - нижний колонтитул: div - ul - div внутри div рядом друг с другом

Question

Я пытаюсь разместить содержание нижнего колонтитула. В моем нижнем колонтитуле будет 3 столбца. Слева, я хочу «контактную информацию», в меню «» среднего, а на правой «новости» HTML структура моего колонтитула, как это:

<div id="footercontainer"> 
    <div id="footer"> 

    <div id="footerLeft"></div> 
    <ul id="footerCenter"> </ul> 
    <div id="footerRight"> </div> 

    </div> 
</div> 

Мой CSS для колонтитула выглядит следующим образом:

#footer{ 
width:1000px; 
margin:auto; 
} 
#footercontainer{ 
width:100%; 
height:auto; 
background:url(../img/prechod_stranka-paticka1920x145.png) no-repeat top center; 
background-color:#4e4b47; 
overflow:hidden; 
} 

#footerLeft{ 
padding-top:80px; 
padding-bottom:20px; 
width:40%; 
padding-left:30px; 
float:left; 
} 

#footerCenter{width:10%;float:left;padding-top:80px; display:block;} 

#footerRight{padding-top:80px; width:10%; display:block; } 

Сейчас footerLeft и footerCenter находятся рядом друг с другом, но footerRight помещается ниже footerLeft. Может ли кто-нибудь помочь мне, как поставить их рядом друг с другом?

Answer 1

это базовая разметка 3 Col макете

http://jsfiddle.net/cancerian73/8Lqr6/

*, *:before, *:after { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 
.common-div { 
width:33.33%; 
min-height:200px; 
float:left; 
} 
.left { 
background-color:#CCC 
} 
.right { 
background-color:#930 
} 
.center { 
background-color:#9C6 
} 

это то, что вы ищете?

Answer 2

Попробуйте изменить display:block на display:inline-block для нижнего бега.

#footerRight{ padding-top:80px; width:10%; display:inline-block; } 

Answer 3

http://jsfiddle.net/3SDCT/

float:left Добавить в свой #footerRight, если вы хотите, чтобы ваше право сноска подтолкнула к центру или вы можете float:right, если вы хотите, чтобы быть подтолкнул к правому краю вашего #footerContainer.

Я поставил красную рамку, чтобы вы могли видеть свой div. Кроме того, я обернул вам неупорядоченный список в div.

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