CSS WEBLAYOUT
CSS Website Layout
Website Layout
A website is often divided into headers, menus, content and a footer: There are tons of different layout designs to choose from. However, the structure above, is one of the most common.
Header
A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:
<!DOCTYPE html>
<html>
<head>
<title>CSS Web Layout</title>
<style>
*{
margin:0;
padding:0;
}
main{
position:relative;
height:100vh;
}
header{
width:100%;
height:7vh;
background:black;
display:flex;
justify-content:right;
align-items:center;
}
ul {
list-style-type: none;
display:flex;
}
li a {
color: #fff;
text-decoration: none;
font-size:20px;
}
/* Change the link color on hover */
li a:hover {
color: #555;
font-size:21px;
}
/*float left*/
li {
margin-right:10px;
}
.content{
background:#f5f3f3;
height:63vh;
text-align:center;
}
footer{
height:30vh;
background:black;
color:white;
display:grid;
grid-template-columns:repeat(3,1fr);
position:absolute;
width:100%;
bottom:0;
}
footer p, footer h4{
margin:20px;
}
</style>
</head>
<body>
<main>
<header>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</header>
<div class="content"> Content goes here</div>
<footer>
<div class='footer-item1'>
<h4>About Us</h4>
<p>Info Goes Here</p>
</div>
<div class='footer-item2'>
<h4>Links</h4>
<p>Links Section Goes Here</p>
</div>
<div class='footer-item2'>
<h4>Subscribe Us</h4>
<p>Suscribe Form Goes Here</p>
</div>
</footer>
</main>
</body>
</html>
Content
The layout in this section, often depends on the target users. The most common layout is one of the following:
- 1-column (often used for mobile browsers)
- 2-column (often used for tablets and laptops)
- 3-column layout (only used for desktops)
We will create a 3-column layout, and change it to a 1-column layout on smaller screens:
<!DOCTYPE html>
<html>
<head>
<style>
.heading{
background:blue;
color:white;
height:5vh;
margin-bottom:30px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller
screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
margin-bottom:30px;
};
}
</style>
</head>
<body>
<div class="container">
<div class="heading">
Nav link menu
</div>
<div class="row">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec
neque ultricies, eget elementum magna tristique.
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec
neque ultricies, eget elementum magna tristique.
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec
neque ultricies, eget elementum magna tristique.
</div>
</div>
</div>
</body>
</html>
Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc. Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter. Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above). To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.-->
Unequal Columns
The main content is the biggest and the most important part of your site
It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:
!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
main{
position:relative;
height:100vh;
}
.sidebar{
width:30%;
height:100%;
background:#011f01;
position:fixed;
}
.container{
margin-left:30%;
position:absolute;
top:0;
width:70%;
background:#f5f3f3;
height:100%;
}
header{
width:100%;
height:7vh;
background:green;
display:flex;
justify-content:right;
align-items:center;
}
ul {
list-style-type: none;
display:flex;
}
li a {
color: #fff;
text-decoration: none;
font-size:20px;
}
/* Change the link color on hover */
li a:hover {
color: #555;
font-size:21px;
}
/*float left*/
li {
margin-right:10px;
}
.content{
height:63vh;
text-align:center;
}
.content-group{
display:grid;
grid-template-columns:1fr;
position:absolute;
width:100%;
gap:2rem;
}
.item1, .item2, .item3{
background:green;
height:10rem;
margin:10px;
}
.inner{
display: flex;
margin-top:10px;
}
.inner > div{
width:30%;
height:5rem;
background:#011f01;
margin:2%
}
</style>
</head>
<body>
<main>
<div class="sidebar"></div>>
<div class="container">
<<header>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a>Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</header>
<div class="content">
<div class="content-group">
<div class='item1'>
<h4>Iterm1</h4>
<p>Item1 Goes Here</p>
<div class='inner'>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class='item2'>
<h4>Item2</h4>
<p>Item2 Section Goes Here</p>
</div>
<div class='item3'>
<h4>Item3</h4>
<p>Item3 Form Goes Here</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Footer
this is more like the header like you should know at this time, you can decide to style it like the header or add a few changes. Responsive Website Layout By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:
