Как создать нижний колонтитул с одним выступом div?

Question

Я хочу сделать футер веб-сайта выглядеть следующим образом:

Вот что у меня до сих пор:

<footer><div class="box1"></div><div class="logo"></div><div class="box2"></div></footer> 

и

footer { width:100%; height:auto;background:#CCC;} 
.box1 {width:33%; height:100px; background:#F04; } 
.box2 {width:33%; height:100px; background:#F04;} 
.logo {width:33% height:150px; background:#F03} 

Answer 1

У меня есть создал скрипку для вас, которая демонстрирует результат, который вы ищете.

EXAMPLE

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

HTML

<footer> 
    <div class="box1"></div> 
    <div class="logo"> 
     <image src="http://www.clker.com/cliparts/C/m/c/J/g/l/white-round-md.png" /> 
    </div> 
    <div class="box2"></div> 
</footer> 

CSS

footer { 
    margin-top:200px; 
    width:100%; 
    height:110px; 
    background:grey; 
} 
.box1 { 
    width:31%; 
    margin-left:1%; 
    margin-right:1%; 
    margin-top:5px; 
    margin-bottom:5px; 
    height:100px; 
    background-color:#cccccc; 
    float:left; 
} 
.box2 { 
    width:31%; 
    margin-left:1%; 
    margin-right:1%; 
    margin-top:5px; 
    margin-bottom:5px; 
    height:100px; 
    background:#cccccc; 
    float:left; 
} 
.logo { 
    width:auto; 
    margin-left:2%; 
    margin-right:2%; 
    margin-top:5px; 
    margin-bottom:5px; 
    height:100px; 
    float:left; 
} 
.logo img { 
    height:250px; 
    margin-top: -150px; 
}