Untitled

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>@media demo</title>
 <style>
#page container {
width: 950px;
margin: 0px auto;}
#header {
background: red; text-align: center;}
#left column {
width: calc(100% * 2 / 7); float: left; background: white;}
#center column {
width: calc(100% * 4 / 7); float: left; text-align: justify; background: white;}
#right column {
width: calc(100% * 1 / 7);
float: left;
background: white;}
#footer {
clear: both; background: red; padding: 5px 5px 5px 5px; text-align: center;}
body {margin: 0px; padding: 0px;}
div {margin: 0px; padding: 0px;}
h1, h2, h3 {margin: 0px; padding: 15px; text-align: center;}
p {margin: 0px; padding: 15px; text-align: justify;}
ul {margin: 0px; padding: 0px;}
li {list-style-type: none; padding: 2px 2px 0px 2px;}
li a {display: block; background: silver; padding: 5px 10px 5px 10px;}
li a:hover {background: red;}

 #header {
 background-color:red;
 text-align:center;
 font-size:1.6em;
 line-height:1.5em;
 color:white;
 }
 #left {
 float:left;
 width:25%;
 font-size:1em;
 line-height:1.5em;
 }
 #left p {
 border:1px solid red;
 border-left:none;
 margin:15px 0;
 padding:15px;
 }
 #center {
 float:left;
 width:50%;
 font-size:1.2em;
 line-height:1.5em;
 }
 #center p {
 margin:15px 0;
 padding:15px;
 }
 #right {
 float:left;
 width:25%;
 font-size:1em;
 line-height:1.5em;
 }
 #right p {
 border:1px solid black;
 border-right:none;
 margin:15px 0;
 padding:15px;
 }
 #footer {
 clear:both;
 background-color:black;
 text-align:center;
 font-size:1.4em;
 line-height:1.5em;
 color:white;
 }
 @media screen and (max-width:400px) {
 #pagecontainer {
 font-size:15px;
 }
 #left, #right, #center{
 float:none;
 width:auto;
 margin:15px;
 }
 #left p, #right p {
 border:1px solid black;
 }
 }
 @media screen and (min-width:400px) and (max-width:800px) {
 #pagecontainer {
 font-size:30px;
 border-left:1px solid black;
 border-right:1px solid black;
 }
 }
 @media screen and (min-width:800px) {
 #pagecontainer {
 font-size:15px;
 border-left:1px solid black;
 border-right:1px solid black;
 }
 }
 </style>
 </head>
 <body>
 <div id="pagecontainer">
 <div id="header">
 <h1>Header</h1>
 </div>
 <div id="left">
 <h2>Left Menu</h2>
 <ul>
 <li><a href="#">Menu 1</a></li>
 <li><a href="#">Menu 2</a></li>
 <li><a href="#">Menu 3</a></li>
 </ul>
 </div>
 <div id="center">
 <h2>Center</h2>
 <p>Technologie WEB, podstawowe pojęcia, przegląd technologii. Język XHTML, reguły składni,
wersje DTD. Layout, tworzenie struktury witryny WWW, budowa w oparciu o bloki, tabele,
ramki.
 </p>
 </div>
 <div id="right">
 <h3>Right Menu</h3>
 <ul>
 <li><a href="#">Menu 5</a></li>
 <li><a href="#">Menu 6</a></li>
 <li><a href="#">Menu 7</a></li>
 </ul>
 </div>
 <div id="footer">
 &#169; 2017 Footer </div>
 </div>
 </body>
</html>