Simple Single Column Website Layouts in CSS
In this lesson we will practice creating simple one-column website layouts. Let's make a layout like this, for example:
Let's get started with implementation. Each layout typically starts with a common div called wrapper that contains the rest of the site:
<div id="wrapper">
</div>
In our case, the wrapper will be aligned to the center of the screen:
#wrapper {
width: 800px;
margin: 50px auto;
}
It will also have a border:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Let's now make the basic structure of the page. It will consist of a menu and the main content - content:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Let's add the contents of our blocks:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Now we can add styles to our blocks. Let's add style to the menu:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
Now let's add styles to the content elements:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Now we can put all the code together:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Tip 1
It is most convenient to give indents from top to bottom. For example, we have a menu and content, and between them there is empty space. Obviously, this space can be made by the bottom indent of the menu, the top indent of the content, or their simultaneous influence. In this case, it is better to set the bottom indent for the menu, and remove the top padding and margin for the content by default for h1.
Tip 2
Descendants should not form a margin between parents. For example, we have a menu. The bottom margin of this menu can be formed either by margin div with the menu, or by margin links. It is better to choose the first option, since links should not act over the head of the parent.
Tip 3
Let's say there is an indent between two elements and in this case it visually makes no difference what to choose for the indent - margin or padding. In this case, choose margin, since it is the one that should create the indents between the elements.
