Layout web page using css

CSS Layout

There are a number of methods that you can use to lay out your web pages and applications. MDN contains a number of in-depth guides to the different methods, and this page provides an overview of them all.

Normal flow, block, and inline layout

If you are not using a flex or grid layout, then your content is laid out using normal flow, or block and inline layout. These guides will help you to understand the way this layout method works.

An introduction to normal flow.

How to take an item out of flow, and what that does to the layout of your document.

An introduction to creating a new formatting context.

How flow layout works if you use a different writing mode, such as vertical text.

Understanding and managing overflow.

Understanding the box model is a CSS fundamental; this guide explains how it works.

Find out why you sometimes end up with less margin than you expect, due to margin collapsing in normal flow.

Absolute positioning, flexbox, and grid all result in the stack (elements’ relative position on the z-axis) to be manipulable via the z-index property. This article explains how to manage it.

Multi-column layout

Multi-column layout, often referred to as multicol, takes content in normal flow, and breaks it into columns. Find out how to use this layout method in the following guides.

An overview of the basic functionality of multicol.

There is a limited amount of styling opportunities for columns; this guide explains what you can do.

Spanning elements across columns, and balancing the content of columns.

What happens when there is more content than available column space?

Dealing with content breaks as the content is split into columns.

Flexbox

CSS Flexible Box Layout, commonly known as flexbox, is a layout model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can «flex» their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

An overview of the features of Flexbox.

How Flexbox relates to other layout methods, and other CSS specifications.

How the Box Alignment properties work with Flexbox.

Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.

Explaining the flex-grow , flex-shrink , and flex-basis properties.

How to create flex containers with multiple lines and control the display of the items along those lines.

Common design patterns that are typical Flexbox use cases.

Grid layout

CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements.

An overview of the features of grid layout.

How grid relates to other methods such as alignment, sizing, and flexbox.

How to place items by numbered lines.

How to place items using the grid-template syntax.

How to name lines, and place items by line name rather than number.

How to manage the auto-placement algorithm, and understand how the browser places items.

How to align items, and distribute space on both axes in grid.

How to use flow relative, rather than physical, properties and values with grid.

Some accessibility considerations when working with grid layout.

How to ensure your site still works well in browsers that don’t support grid.

Using grid to build some common layouts.

An explanation of the subgrid value, part of Grid Level 2.

An explanation of the masonry layout feature in Grid Level 3.

Alignment

The alignment properties are specified for block and inline layout, though there is no browser support as yet.

The alignment properties first appeared with flexbox; this guide explains how they work.

How to align items in grid layout.

How alignment will work in multicol.

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS 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, and we will take a closer look at it in this tutorial.

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:

Example

Header

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Example

/* The navbar container */
.topnav overflow: hidden;
background-color: #333;
>

/* Navbar links */
.topnav a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Links — change color on hover */
.topnav a:hover background-color: #ddd;
color: black;
>

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)

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Example

/* Create three equal columns that float 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%;
>
>

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

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:

Example

/* Left and right column */
.column.side width: 25%;
>

/* Middle column */
.column.middle width: 50%;
>

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

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Main Content

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.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Footer

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

Example

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:

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

HTML Layout Elements and Techniques

Websites often display content in multiple columns (like a magazine or a newspaper).

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

— Defines a header for a document or a section
— Defines a set of navigation links
— Defines a section in a document
— Defines an independent, self-contained content
— Defines content aside from the content (like a sidebar)
— Defines a footer for a document or a section
— Defines additional details that the user can open and close on demand
— Defines a heading for the element

• — Defines a header for a document or a section
• — Defines a set of navigation links
• — Defines a section in a document
• — Defines an independent, self-contained content
• — Defines content aside from the content (like a sidebar)
• — Defines a footer for a document or a section
• — Defines additional details that the user can open and close on demand
• — Defines a heading for the element

You can read more about semantic elements in our HTML Semantics chapter.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn — you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Learn more about CSS grids in our CSS Grid Intro chapter.

Источник