Scribd
Upload
5 views

Css Layouts

Uploaded by

gishwarya2006
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Css Layouts

Uploaded by

gishwarya2006
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS Layout

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

Navigation Bar
A navigation bar contains a list of links to help visitors navigating through
your website:
Content
The layout in this section, often depends on the target users. The most
common layout is one (or combining them) 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)

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:

Footer
The footer is placed at the bottom of your page. It often contains information
like copyright and contact info:

Example : Pgm
<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Website Layout</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*{

box-sizing: border-box;

body {

margin: 0;

/* Style the header */

.header {

background-color: #f1f1f1;

padding: 20px;
text-align: center;

/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

/* Create three unequal columns that floats next to each other */

.column {

float: left;

padding: 10px;

}
/* Left and right column */

.column.side {

width: 25%;

/* Middle column */

.column.middle {

width: 50%;

/* 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 */

@media screen and (max-width: 600px) {

.column.side, .column.middle {

width: 100%;

/* Style the footer */

.footer {

background-color: #f1f1f1;

padding: 10px;
text-align: center;

</style>

</head>

<body>

<div class="header">

<h1>Header</h1>

<p>Resize the browser window to see the responsive effect.</p>

</div>

<div class="topnav">

<a href="#">Link</a>

<a href="#">Link</a>

<a href="#">Link</a>

</div>

<div class="row">

<div class="column side">

<h2>Side</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>

</div>

<div class="column middle">

<h2>Main Content</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.
Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula,
risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent
scelerisque tortor sed accumsan convallis.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.
Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula,
risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent
scelerisque tortor sed accumsan convallis.</p>

</div>

<div class="column side">

<h2>Side</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>

</div>

</div>

<div class="footer">

<p>Footer</p>

</div>

</body>

</html>.

Responsive Website Layout

You might also like