Three-column layout

Question

css

Hello. I want to turn to the habrasoobshchestvo about an already hackneyed question, but, unfortunately, without a working answer to the question posed.
So, what is required is: a three-column corssbrowser layout with a header, central part and footer, which should behave in exactly the same way, namely: ears with a background and a maximum width restriction, a central part with a minimum width restriction. The task is that when the browser window expands, the ears, having reached their maximum width (say, 60px), are attracted to the edges of the window, and the central part expands. When narrowing the window, the central part was first compressed (to say, up to 940px), then the ears began to disappear. When the window itself becomes 940px, only the central part should remain on it.
First thought:
<div id="header">
<div style="max-width: 60px; background: url(background-left.jpg) top right no-repeat; float:left;"></div>
<div style="max-width: 60px; background: url(background-right.jpg) top left no-repeat; float:right;"></div>
<div style="min-width: 940px; padding: 0 60px; background: url(background-header.jpg) top right no-repeat;">Контент шапки</div>
</div>
<div id="content">
<div style="max-width: 60px; background: url(background-cleft.jpg) top right no-repeat; float:left;"></div>
<div style="max-width: 60px; background: url(background-cright.jpg) top left no-repeat; float:right;"></div>
<div style="min-width: 940px; padding: 0 60px;">Контент сайта</div>
</div>
<div id="footer">
<div style="max-width: 60px; background: url(background-fleft.jpg) top right no-repeat; float:left;"></div>
<div style="max-width: 60px; background: url(background-fright.jpg) top left no-repeat; float:right;"></div>
<div style="min-width: 940px; padding: 0 60px; background: url(background-footer.jpg) top right no-repeat;">Контент подвала</div>
</div>


Everything is fine here, except for the padding. They do not let the ears disappear ... What needs to be corrected here?
Thank you all in advance

Answer 1

You need to add media queries and using the rule with

max-width: 939px

, add for the ears

display: none;