Two-column website layout in CSS

Let's make a two-column layout like this:

First, let's create the basic structure of the page:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="content">
			content
		</div>
		<div id="sidebar">
			sidebar
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

Now let's assign styles to the wrapper, aligning it to the center of the screen:

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

Now let's set the header and footer styles:

#header {
	height: 200px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	border: 1px solid black;
}

As you can see, we set the height of the header and footer. We do this because they have no content in our scheme. If there is content, there is no need to set the height of the blocks - it will be formed by their content.

Also note that we don't set their width. The thing is that the header and footer are block elements and their width will automatically be equal to the wrapper width.

Let's now give them padding so that the text doesn't stick to the borders:

#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}

Having padding, however, will have a negative effect on the block sizes - they will become larger than specified. Let's change the behavior of all blocks so that padding and borders do not expand our blocks:

* {
	box-sizing: border-box;
}

Now we need to put the content and sidebar in one row. Let's do this with flex:

#container {
	display: flex;
}

Let's specify the content and sidebar width. The sum of their widths should be equal to the wrapper width:

#content {
	width: 800px;
}
#sidebar {
	width: 200px;
}

Let's say we want to make a margin between the sidebar and the content. In this case, the sidebar needs to be set to margin. In this case, we will have to pinch off the width from someone for this margin. Let's pinch off from the content, reducing its width accordingly:

#content {
	width: 780px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Let's now add height, since our elements do not contain content. It is enough to add height to only one element, because the second flex element will adjust in height (why?). Let's set the height to the content:

#content {
	width: 780px;
	height: 700px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Let's add the rest of the styles to the content and sidebar:

#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}

That's it, our layout is ready. Let's put all the code together:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="sidebar">
			sidebar
		</div>
		<div id="content">
			content
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

* {
	box-sizing: border-box;
}

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}
#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#container {
	display: flex;
}
#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}