Адаптивная верстка в теге <footer>

@The_Fat_Man · Регистрация: 04.03.2014

Author24 — интернет-сервис помощи студентам

Всем доброго времени суток! Не получается сделать верстку футера как на макете: http://i11.pixs.ru/thumbs/4/1/... 525412.jpg При масштабировании вечно один из элементов куда-то или сползает или вылазит. Мой код на JSFiddle: https://jsfiddle.net/nnzrogbf/

Дублирую код с JSFiddle сюда:

HTML5

<footer>
            <span>
            <p>
                We created this Trademark
                <span>
                    small text small text small text
                </span>
            </p>
 
            <address>
                <span>
                    City 1<br>
                    111 (22) 222-33-44
                </span>
                <span>
                    City 2<br>
                    111 (22) 222-33-44<br>
                    111 (22) 222-33-44
                </span>
            </address>
 
            <a href="#">
                <img src="img/logo.png" alt="logo_image">
            </a>
            </span>
        </footer>

CSS

footer {
    padding: 5% 10% 5% 10%;
    background-color: #00555f; 
    color: #ffffff;
}
 
footer p {
    font-size: 2em;
    width: 55%;
    height: inherit;
    background-color: yellow;
    float: left;
    border-right: 0.1em dotted #ffffff;
}
 
footer img{
    width: 20%;
    float: right;
}
 
footer address {
    padding-left: 2%;
    background-color: green;
    width: 18%;
    height: inherit;
    float: right;
    border-left: 0.2em dotted #ffffff;
}
 
footer span {
    display:inline-block; 
    width:100%; 
    background-color: red;
}

Я уже добрую половину дня с этим вожусь и все никак не могу справиться. Прошу помощи. Еще неясно, как сделать границы одинаковой высоту у двух блоков, соседствующих с картинкой. P.S. У меня <address> блочный элемент. Это прописано в другом файле css:

CSS

header, nav, footer, article, aside, section, address {
    display: block;
}
 
footer {
    clear: both;
}

@petr-sev · 18.03.2015, 18:02

нужно полностью отвязаться от размеров контента

CSS

footer {
    padding: 5% 10% 5% 10%;
    background-color: #00555f; 
    color: #ffffff;
}

заменить на пикселы
и явно задать ширину, по умолчанию она устанавливается auto и расчитывается от контента

	18.03.2015, 18:02

Опции темы