- style.css
- setup.css
- index.html
/* Setup styles in the other file. */
aside {
background-color: gold;
padding: 10px;
width: 100px;
float: left;
margin-right: 10px;
}
div:nth-child(2) aside {
float: right;
margin-right: initial;
margin-left: 10px;
}
div:after {
content: "";
display: block;
clear: both;
}
body {
font-family: sans-serif;
padding: 20px;
}
div {
background-color: deepskyblue;
padding: 10px;
border-top: solid black 4px;
}
div:not(:first-child) {
margin-top: 20px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../assets/reset.css" rel="stylesheet">
<link href="setup.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<section>
<div>
<aside>
<p>This is an aside element.</p>
</aside>
<p>This is some text.</p>
</div>
<div>
<aside>
<p>And another aside here too, with a lot more text in it.</p>
</aside>
<p>And some more.</p>
</div>
<div>
<p>And a third one, too.</p>
</div>
</section>
</body>
</html>