width: 1200px; (this is a good width for float, flexbox, or CSS grid)
background-color: green; (when adjusting things, it is good practice to give elements a background color so you can more easily see it. You will then remove it [background-color] when the page is how you like it.)
A common page layout is the following:
To move the aside next to the article in float:
| article { | |
| background-color: green; | |
| width: 825px; | 1200px-825px-300px= 75px space between article and aside |
| float: left; | |
| } |
| aside { | |
| background-color: purple; | |
| width: 300px; | |
| float: right; | It is floated all the way to the right margin. |
| } |
| footer { | |
| background-color: yellow; | |
| clear: both; | Clears the float, so that the footer is at the bottom of the page, and not “floated” below the aside. |
| } |