HTML and CSS Reference
In-Depth Information
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
<article>
<p>I never am really satisfied...</p>
</article>
<aside>
This page is a demo for media queries.
<img src="dust-puppy.svg">
</aside>
</div>
<footer>
<span id="msg480">Viewing 480px or less mode</span>
<span id="msg800">Viewing 800px or less mode</span>
<span id="msg801">Viewing 800px or more mode</span>
</footer>
The default three-column layout is for windows greater than 800 pixels
wide:
body { width: 90%; margin: 0 5%;
font-family: "Komika Hand", sans-serif; }
header,
footer { display: block; width: auto; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav a { display: block; margin: 1em;
padding: 1em; outline: 4px dashed black; }
img { max-width: 100px; display: block;
margin: 0.5em auto; }
div { display: table; outline: none; padding: 0; }
nav,
article,
aside { display: table-cell; }
nav,
aside { width: 25%; }
article { width: 50%; }
#msg480,
#msg800 { display: none; }
If viewed in a window 800 pixels wide or narrower, the page switches
to a two-column layout.
