Now that we have the basics to create the structure of our project, we need to define a horizontal direction within the
section
element, and then set the header
element's width to a fixed value.
We have already created the index.html
HTML in the first section of this chapter. Now let's reprint the body
section again for clarity:
<body> <section id="infographic"> <header> <h1>a cool infographic</h1> </header> <article> </article> </section> </body>
We can start adding the following instructions to application.css
:
html, body{ height: 100%; } body{ overflow: hidden; font-family: sans-serif; } section{ display: box; box-orient: horizontal; height: 100%; width: 100%; overflow: hidden; } header{ width: 200px; background: rgb(181, 65, 71); } article{ background-color: rgb(204, 204, 204); background-image: repeating-linear-gradient(bottom left, rgb(204, 204...