- How to build a « One-page layout »
- One-page website with pages aligned horizontally & vertically
- One-column website with pages aligned vertically
- Dealing with Internet Explorer
- Fixing min-height issue
- Fixing margin-auto issue
- Laisser un commentaire
- Détails de l’article
- Articles par catégorie
- Suivre le blog
- A propos de design-fluide
- Présence virtuelle
- HTML Layout Elements and Techniques
- Example
- Cities
- London
- HTML Layout Elements
- HTML Layout Techniques
- CSS Frameworks
- CSS Float Layout
- Example
- Cities
- London
- CSS Flexbox Layout
- Example
- Cities
- London
- CSS Grid Layout
- CSS Website Layout
- Header
- Example
- Header
- Navigation Bar
- Example
- Content
- Example
- Column
- Column
- Column
- Unequal Columns
- Example
- Side
- Main Content
- Side
- Footer
- Example
- Responsive Website Layout
How to build a « One-page layout »
Years ago, I published an article about how to make a single-page layout working on Internet Explorer 8+ with « CSS tables » (it’s here). Now that IE8/9 represent less than 1% of global users ( Worldwide , June 2018), we can (finally) ignore these guys and focus on something more present-friendly .
So, here some simple ways to build a (responsive) one-page website, using CSS Flexbox & vh unit.
Working on modern browsers and IE10+.
- [#] One-page website with pages aligned horizontally & vertically
- [#] One-column website with pages aligned vertically
- [#] Dealing with Internet Explorer
One-page website with pages aligned horizontally & vertically
- Page height at least equal to viewport height: 100vh = 100% viewport height.
- Aligns flex item (here our page content) horizontally and vertically. Read more about Flexbox horizontal and vertical centering.
- Makes content grow to its maximum size. We could use flex-grow: 1 or flex-basis: 100% there, but width: 100% is the only solution that doesn’t need any fix in IE.
- Fluid but limited width.
One-column website with pages aligned vertically
Pretty similar to the previous exemple, except we’re limiting and centering horizontally the page (*) rather than the content . This allows us to get that single-column layout we were looking for.
Dealing with Internet Explorer
Fixing min-height issue
In IE10 and IE11, flex items are ignoring parent’s height if it’s defined with min-height property (read more). Wrap your pages in a global container and apply the following instructions to fix that issue:
Fixing margin-auto issue
Only if you’re using the one-column layout. In IE10-11, flex items in a column direction (as we’ve just defined in the previous fix) don’t render properly the margin: 0 auto centering if no width has been fixed (read more). So, just add one to make these old guys happy (it won’t bothers our modern friends):
You’re now ready to build your own single-page website ! And you might like to add some smooth scrolling effect to your brand new layout .
- Article précédent : Centrer horizontalement avec Flexbox Publié le 02/08/2018 Dans la catégorie : CSS
- Article suivant : How to break long words in an HTML (or CSS) table Publié le 09/12/2018 Dans la catégorie : CSS
Laisser un commentaire
Détails de l’article
Date de parution : 05/08/2018 Publié dans : CSS, Responsive Participations : Aucun commentaire
Articles par catégorie
Suivre le blog
A propos de design-fluide
design-fluide est le portfolio en ligne de Mathieu RELIGIEUX, artisan du web curieux et passionné. Ce site met en vitrine mes compétences, mes réalisations et mes réflexions techniques.
Présence virtuelle
Copyright © 2011 — 2023 design-fluide.com
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 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.
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.