CSS - Layouts

CSS Layout is essential for defining the visual structure, organization, and responsiveness of a website. In this tutorial, we will explore various CSS techniques to create effective website layouts.

Structure of Webpage Layout

A webpage is made up of various sections like header, menus, content, and footer based on which there are many different layout designs available for developers.

To know how to define a webpage structure, checkout our tutorial onHTML Layout. Here we explained each and every elements of a webpage layout. In this tutorial we will see how to style a webpage layout using CSS.

Table of Contents

CSS Normal Layout FlowCSS Float LayoutCSS Flex LayoutCSS Grid LayoutsCSS PositioningCSS Responsive Layout

CSS Normal Layout Flow

Normal flow is the default layout mode where elements are positioned in the order they appear in the HTML document.

• Block level elements like <div>, <p>, headings will stack vertically and takes up full width if not specified.
• Inline elements like <span>, <strong> stack horizontally. You cannot alter height and width of these elements.
• Inline block elements will behave like both inline and block. They will start from current line but you can alter it’s size.

Let’s see an example for CSS normal layout flow

Example

CSS Float Layout

Float Layout is used to position elements left or right in document flow. Main use of this layout system is to create two column layout and to wrap texts to either sides of image in webpage.

.sidebar {
    float: left;
    width: 25%;
}
.main-content {
    float: right;
    width: 75%;
}

This layout create a sidebar at left side of the page occupying 25% of available width and main content at right with 75% width.

In this example we will see how float is used with images to wrap text.

Example

CSS Flex Layout

CSSFlex Layoutorganizes elements within a container along a single dimension, which can be either horizontally or vertically aligned.

Following example uses flex-direction as row, means items will be arranged horizontally. For vertical arrangement you need to set flex direction as column.

Example

CSS Grid Layouts

CSS Grid Layout is a two-dimensional layout system used for organizing elements horizontally and vertical while developing responsive webpages.

In the following example we define columns as ‘2fr 1fr 1fr’, this means that first column should take 2 fraction of available space and rest two columns take 1 fraction of available space.

Example

CSS Positioning

CSSPositioninghelps to manipulate position of any element in a web page.

Along withpositionproperty, other properties liketop, bottom, leftandrightare used to control its exact position on the page. They specify the offsets of an element from its edges.

Example

CSS Responsive Layout

A Responsive webpage layout looks good in all the end user devices like phones, tablets and desktops. It will automatically adjust size and other features accordance with user device.

In CSS theMedia Queriesare used to apply different CSS styles based on the screen size, resolution, and other characteristics of the user device.

@media (width > 700px) {
    /* Styles for screens that are at least 700px wide */
}

The following example demonstrates that when the screen width is between 600px and 800px, the background color changes to yellow and text color changes to red.

Example