css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- Syntax Highlighter added -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.15.0/prism.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.15.0/themes/prism-okaidia.min.css">

<nav id="navbar">
  
  <hr>
	  <header id="main_headline">
	   <h2>CSS Layout Documentation</h2>
	  </header>
  <hr>
  
  <div id="links">
	<a href="#introduction_to_css_layout" class="nav-link">Introduction to CSS layout</a>
	<a href="#normal_flow" class="nav-link">Normal flow</a>
	<a href="#the_display_property" class="nav-link">The display property</a>
	<a href="#flexbox" class="nav-link">Flexbox</a>
	<a href="#grid_layout" class="nav-link">Grid Layout</a>
	<a href="#floats" class="nav-link">Floats</a>
	<a href="#positioning_techniques" class="nav-link">Positioning techniques</a>
	<a href="#table_layout" class="nav-link">Table layout</a>
	<a href="#multi_column_layout" class="nav-link">Multi Column layout</a>
	<a href="#summary" class="nav-link">Summary</a>
	<a href="#reference" class="nav-link">Reference</a>
    
</div>
  
</nav>

<main id="main-doc">
	
	<!-- Introduction -->
	<section class="main-section" id="introduction_to_css_layout">
		<header>
			<h1>Introduction to CSS layout</h1>
		</header>

		<p>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different <span class="property_css">display</span> values — and introduce some of the concepts we'll be covering throughout this module.</p>
			
		<div id="prerequisities_objective">
			<div><strong>Prerequisites</strong>: The basics of HTML (study Introduction to HTML), and an idea of How CSS works (study Introduction to CSS.</div>
			
			<div><strong>Objective</strong>: To give you an overview of CSS page layout techniques. Each technique can be learned in greater detail in subsequent tutorials.</div>
		</div>
		
		<p>CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.  The page layout techniques we'll be covering in more detail in this module are</p>

		<ul>
			<li>Normal flow</li>
			<li>The <span class="property_css">display</span> property</li>
			<li>Flexbox</li>
			<li>Grid</li>
			<li>Floats</li>
			<li>Positioning</li>
			<li>Table layout</li>
			<li>Multiple-column layout</li>
		</ul>
		
		<p>Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.</p>

	</section>
	
	<!-- Normal Flow-->
	<section class="main-section" id="normal_flow">
		<header>
			<h2>Normal Flow</h2>
		</header>

		<p>Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Let's look at a quick HTML example:</p>
		
<pre><code class="lang-html">&lt;p&gt;I love my cat.&lt;/p&gt;
    
&lt;ul&gt;
 &lt;li&gt;Buy cat food&lt;/li&gt;
 &lt;li&gt;Exercise&lt;/li&gt;
 &lt;li&gt;Cheer up friend&lt;/li&gt;
&lt;/ul&gt;
    
&lt;p&gt;The end!&lt;/p&gt;</code></pre>

		<p>By default, the browser will display this code as follows:</p>

		<script async src="//jsfiddle.net/9Lfb82h6/embed/result/"></script>

		<p>Note here how the HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.</p>

		<p>The elements that appear one below the other are described as <i>block</i> elements, in contrast to <i>inline</i> elements, which appear one beside the other, like the individual words in a paragraph.</p>
		
		<div class="note">
		<strong>Note</strong>: The direction in which block element contents are laid out is described as the Block Direction. The Block Direction runs vertically in a language such as English, which has a horizontal writing mode. It would run horizontally in any language with a Vertical Writing Mode, such as Japanese. The corresponding Inline Direction is the direction in which inline contents (such as a sentence) would run.
		</div>

		<p>When you use CSS to create a layout, what you are doing is moving the elements away from this normal flow, however for many of the elements on your page this normal flow will create exactly the layout you need. This is why starting with a well-structured HTML document is so important, as you can then work with the way things are laid out by default rather than fighting against it.</p>

		<p>The methods that can change how elements are laid out in CSS are as follows:</p>

		<ul>
			<li><strong>The <span class="property_css">display</span> property</strong> — Standard values such as <span class="value_css">block</span>, <span class="value_css">inline</span> or <span class="value_css">inline-block</span> can change how elements behave in normal flow (see <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes" target="_blank">Types of CSS boxes</a> for more information). We then have entire layout methods that are switched on via a value of <span class="value_css">display</span>, for example <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids" target="_blank">CSS Grid</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" target="_blank">Flexbox</a>.</li>
			<li><strong>Floats</strong> — Applying a <span class="value_css">float</span> value such as <span class="value_css">left</span> can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.</li>
			<li><strong>The <span class="property_css">position</span> property</strong> — Allows you to precisely control the placement of boxes inside other boxes. <span class="value_css">static</span> positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top left of the browser viewport.</li>
			<li><strong>Table layout</strong> — features designed for styling the parts of an HTML table can be used on non-table elements using <span class="value_css">display: table</span> and associated properties..</li>
			<li><strong>Multi-column layout</strong> — The Multi-column layout properties can cause the content of a block to layout in columns, as you might see in a newspaper.</li>
		</ul>

	</section>
	
	<!-- The display property-->
	<section class="main-section" id="the_display_property">
		<header>
			<h2>The Display Property</h2>
		</header>

			<p>The main methods of achieving page layout in CSS are all values of the <span class="value_css">display</span> property. This property allows us to change the default way something displays. Everything in normal flow has a value of <span class="value_css">display</span>, used as the default way that elements they are set on behave. For example, the fact that paragraphs in English display one below the other is due to the fact that they are styled with <span class="value_css">display: block</span>. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line. This is because the &lt;<span class="element">a</span>&gt; element is <span class="value_css">display: inline</span> by default.</p>

			<p>You can change this default display behaviour. For example, the &lt;<span class="element">li</span>&gt; element is <span class="value_css">display: block</span> by default, meaning that list items display one below the other in our English document. If we change the display value to <span class="value_css">inline</span> they now display next to each other, as words would do in a sentence. The fact that you can change the value of <value class="property_css">display</value> for any element means that you can pick HTML elements for their semantic meaning, without being concerned about how they will look. The way they look is something that you can change.</p>

			<p>In addition to being able to change the default presentation by turning an item from <span class="value_css">block</span> to <span class="value_css">inline</span> and vice versa, there are some bigger layout methods that start out as a value of <span class="property_css">display</span>. However when using these you will generally need to invoke additional properties. The two values most important for our purposes when discussing layout are <span class="value_css">display: flex</span> and <span class="value_css">display: grid</span>.</p>

	</section>
	
	<!-- Flexbox-->
	<section class="main-section" id="flexbox">
		<header>
			<h2>Flexbox</h2>
		</header>

		<p>Flexbox is the short name for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout" target="_blank">Flexible Box Layout</a> Module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply <span class="value_css">display: flex</span> to the parent element of the elements you want to lay out; all its direct children then become flex items. We can see this in a simple example.</p>

		<p>The HTML markup below gives us a containing element, with a class of <span class="value_css">wrapper</span>, inside which are three &lt;<span class="element">div</span>&gt; elements. By default these would display as block elements, below one another, in our English language document.</p>

		<p>However, if we add <span class="value_css">display: flex</span> to the parent, the three items now arrange themselves into columns. This is due to them becoming flex items and using some initial values that flexbox gives them. They are displayed as a row, because the initial value of <span class="property_css">flex-direction</span> is <span class="value_css">row</span>. They all appear to stretch to the height of the tallest item, because the initial value of the <span class="property_css">align-items</span> property is <span class="value_css">stretch</span>. This means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. The items all line up at the start of the container, leaving any extra space at the end of the row.</p>
		
<pre><code class="lang-css">.wrapper {
 display: flex;
}</code></pre>

<pre><code class="lang-html">&lt;div class=&quot;wrapper&quot;&gt;
 &lt;div class=&quot;box1&quot;&gt;One&lt;/div&gt;
 &lt;div class=&quot;box2&quot;&gt;Two&lt;/div&gt;
 &lt;div class=&quot;box3&quot;&gt;Three&lt;/div&gt;
&lt;/div&gt;	</code></pre>

	<script async src="//jsfiddle.net/zcam7n8t/embed/result/"></script>

	<p>In addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. These properties, among other things, can change the way that the items flex, enabling them to expand and contract to fit into the available space.</p>

	<p>As a simple example of this, we can add the <span class="property_css">flex</span> property to all of our child items, with a value of <span class="value_css">1</span>. This will cause all of the items to grow and fill the container, rather than leaving space at the end. If there is more space then the items will become wider; if there is less space they will become narrower. In addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust size to take up the same amount of space, whatever that is.</p>
	
<pre><code class="lang-css">.wrapper {
    display: flex;
}

.wrapper &gt; div {
    flex: 1;
}</code></pre>

<pre><code class="lang-html">&lt;div class=&quot;wrapper&quot;&gt;
  &lt;div class=&quot;box1&quot;&gt;One&lt;/div&gt;
  &lt;div class=&quot;box2&quot;&gt;Two&lt;/div&gt;
  &lt;div class=&quot;box3&quot;&gt;Three&lt;/div&gt;
&lt;/div&gt;</code></pre>

		<script async src="//jsfiddle.net/mwfjuz5e/embed/result/"></script>

		<div class="note">
			<strong>Note</strong>: This has been a very short introduction to what is possible in Flexbox, to find out more, see our Flexbox article.
		</div>

	</section>
	
	<!-- Grid Layout-->
	<section class="main-section" id="grid_layout">
		<header>
			<h2>Grid Layout</h2>
		</header>

		<p>While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.</p>

		<p>Once again, you can switch on Grid Layout with a specific value of display — <span class="value_css">display: grid</span>. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using <span class="value_css">display: grid</span>, we are also defining some row and column tracks on the parent using the <span class="property_css">grid-template-rows</span> and <span class="property_css">grid-template-columns</span> properties respectively. We've defined three columns each of <span class="value_css">1fr</span> and two rows of <span class="value_css">100px</span>. I don’t need to put any rules on the child elements; they are automatically placed into the cells our grid has created.</p>

<pre><code class="lang-css">.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}</code></pre>

<pre><code class="lang-html">&lt;div class=&quot;wrapper&quot;&gt;
  &lt;div class=&quot;box1&quot;&gt;One&lt;/div&gt;
  &lt;div class=&quot;box2&quot;&gt;Two&lt;/div&gt;
  &lt;div class=&quot;box3&quot;&gt;Three&lt;/div&gt;
  &lt;div class=&quot;box4&quot;&gt;Four&lt;/div&gt;
  &lt;div class=&quot;box5&quot;&gt;Five&lt;/div&gt;
  &lt;div class=&quot;box6&quot;&gt;Six&lt;/div&gt;
&lt;/div&gt;</code></pre>
	
	<script async src="//jsfiddle.net/j6nL1f3z/embed/result/"></script>

		<p>Once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above. In the second example below we have defined the same grid, but this time with three child items. We've set the start and end line of each item using the <span class="property_css">grid-column</span> and <span class="property_css">grid-row</span> properties. This causes the items to span multiple tracks.</p>

<pre><code class="lang-css">.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}

.box1 {
  grid-column: 2 / 4;
  grid-row: 1;
}

.box2 {
  grid-column: 1;
  grid-row: 1 / 3;
}

.box3 {
  grid-row: 2;
  grid-column: 3;
}</code></pre>

<pre><code class="lang-html">&lt;div class=&quot;wrapper&quot;&gt;
  &lt;div class=&quot;box1&quot;&gt;One&lt;/div&gt;
  &lt;div class=&quot;box2&quot;&gt;Two&lt;/div&gt;
  &lt;div class=&quot;box3&quot;&gt;Three&lt;/div&gt;
&lt;/div&gt;</code></pre>

	<script async src="//jsfiddle.net/tr9v7kLn/embed/result/"></script>

		<div class="note">
			<strong>Note</strong>: These two examples are just a small part of the power of Grid layout; to find out more see our <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a> article.
		</div>

		<p>The rest of this guide covers other layout methods, which are less important for the main layout structures of your page but can still help you achieve specific tasks. By understanding the nature of each layout task, you will soon find that when you look at a particular component of your design the type of layout best suited to it will often be clear.</p>

	</section>

	<!-- Floats -->
	<section class="main-section" id="floats">
		<header>
			<h2>Floats</h2>
		</header>

		<p>Floating an element changes the behavior of that element and the block level elements that follow it in normal flow. The element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item.</p>

		<p>The <span class="property_css">float</span> property has four possible values:</p>

		<ul>
			<li> <span class="value_css">left</span> — Floats the element to the left.</li>
			<li><span class="value_css">right</span> — Floats the element to the right.</li>
			<li><span class="value_css">none </span>— Specifies no floating at all. This is the default value.</li>
			<li><span class="value_css">inherit</span> — Specifies that the value of the float property should be inherited from the element's parent element.</li>
		</ul>

		<p>In the example below we float a &lt;<span class="element">div</span>&gt; left, and give it a <span class="property_css">margin</span> on the right to push the text away from the element. This gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern web design.</p>

<pre><code class="lang-html">&lt;h1&gt;Simple float example&lt;/h1&gt;
    
&lt;div class=&quot;box&quot;&gt;Float&lt;/div&gt;
    
&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;</code></pre>

<pre><code class="lang-css">.box {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 30px;
}</code></pre>

	<script async src="//jsfiddle.net/au27bzt5/embed/result/"></script>

		<div class="note">
			<strong>Note</strong>: Floats are fully explained in our lesson on the <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats" target="_blank">float and clear</a> properties. Prior to techniques such as Flexbox and Grid Layout floats were used as a method of creating column layouts. You may still come across these methods on the web; we will cover these in the lesson on <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods" target="_blank">legacy layout methods</a>.
		</div>

	</section>
	
	<!-- Positioning Techniques -->
	<section class="main-section" id="positioning_techniques">
		<header>
			<h2>Positioning Techniques</h2>
		</header>

		<p>Positioning allows you to move an element from where it would be placed when in normal flow to another location. Positioning isn’t a method for creating your main page layouts, it is more about managing and fine-tuning the position of specific items on the page.</p>

		<p>There are however useful techniques for certain layout patterns that rely on the <span class="property_css">position</span> property. Understanding positioning also helps in understanding normal flow, and what it is to move an item out of normal flow.</p>

		<p>There are five types of positioning you should know about:</p>

		<ul>
			<li><strong>Static positioning</strong> is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here".</li>
			<li><strong>Relative positioning</strong> allows you to modify an element's position on the page, moving it relative to its position in normal flow — including making it overlap other elements on the page.</li>
			<li><strong>Absolute positioning</strong> moves an element completely out of the page's normal layout flow, like it is sitting on its own separate layer. From there, you can fix it in a position relative to the edges of the page's &lt;<span class="element">html</span>&gt; element (or its nearest positioned ancestor element). This is useful for creating complex layout effects such as tabbed boxes where different content panels sit on top of one another and are shown and hidden as desired, or information panels that sit off screen by default, but can be made to slide on screen using a control button.</li>
			<li><strong>Fixed positioning</strong> is very similar to absolute positioning, except that it fixes an element relative to the browser viewport, not another element. This is useful for creating effects such as a persistent navigation menu that always stays in the same place on the screen as the rest of the content scrolls.</li>
			<li><strong>Sticky positioning</strong> is a newer positioning method which makes an element act like <span class="value_css">position: static</span> until it hits a defined offset from the viewport, at which point it acts like <span class="value_css">position: fixed</span>.</li>
		</ul>
		
		<h3>Simple Positioning Example</h3>
		<p>To provide familiarity with these page layout techniques, we'll show you a couple of quick examples. Our examples will all feature the same HTML, which is as follows:</p>

<pre><code class="lang-html">&lt;h1&gt;Positioning&lt;/h1&gt;

&lt;p&gt;I am a basic block level element.&lt;/p&gt;
&lt;p class=&quot;positioned&quot;&gt;I am a basic block level element.&lt;/p&gt;
&lt;p&gt;I am a basic block level element.&lt;/p&gt;</code></pre>
		
		<p>This HTML will be styled by default using the following CSS:</p>

<pre><code class="lang-css">body {
width: 500px;
margin: 0 auto;
}

p {
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}</code></pre>

		<p>The rendered output is as follows:</p>

		<script async src="//jsfiddle.net/8ngtzoqe/embed/result/"></script>

		<h3>Relative Positioning</h3>

		<p>Relative positioning allows you to offset an item from the position in normal flow it would have by default. This means you could achieve a task such as moving an icon down a bit so it lines up with a text label. To do this, we could add the following rule to add relative positioning:</p>

<pre><code class="lang-css">.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}</code></pre>

		<p>Here we give our middle paragraph a <span class="property_css">position</span> value of <span class="value_css">relative</span> — this doesn't do anything on its own, so we also add <span class="property_css">top</span> and <span class="property_css">left</span> properties. These serve to move the affected element down and to the right — this might seem like the opposite of what you were expecting, but you need to think of it as the element being pushed on its left and top sides, which result in it moving right and down.</p>

		<p>Adding this code will give the following result:</p>

<pre><code class="lang-css">.positioned {
 position: relative;
 background: rgba(255,84,104,.3);
 border: 2px solid rgb(255,84,104);
 top: 30px;
 left: 30px;
}</code></pre>

		<script async src="//jsfiddle.net/8t7ge92f/embed/result/"></script>

		<h3>Absolute Positioning</h3>
		<p>Absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.</p>

		<p>Going back to our original non-positioned example, we could add the following CSS rule to implement absolute positioning:</p>

<pre><code class="lang-css">.positioned {
 position: absolute;
 top: 30px;
 left: 30px;
}</code></pre>

		<p>Here we give our middle paragraph a <span class="property_css">position</span> value of <span class="value_css">absolute</span>, and the same <span class="property_css">top</span> and <span class="property_css">left</span> properties as before. Adding this code, however, will give the following result:</p>

<pre><code class="lang-css">.positioned {
  position: absolute;
  background: rgba(255,84,104,.3);
  border: 2px solid rgb(255,84,104);
  top: 30px;
  left: 30px;
}</code></pre>

	<script async src="//jsfiddle.net/9we1tzbr/embed/result/"></script>

		<p>This is very different! The positioned element has now been completely separated from the rest of the page layout and sits over the top of it. The other two paragraphs now sit together as if their positioned sibling doesn't exist. The <span class="property_css">top</span> and <span class="property_css">left</span> properties have a different effect on absolutely positioned elements than they do on relatively positioned elements. In this case the offsets have been calculated from the top and left of the page. It is possible to change the parent element that becomes this container and we will take a look at that in the lesson on <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning"target="_blank">positioning</a>.</p>

		<h3>Fixed positioning</h3>

		<p>Fixed positioning removes our element from document flow in the same way as absolute positioning. However, instead of the offsets being applied from the container, they are applied from the viewport. As the item remains fixed in relation to the viewport we can create effects such as a menu which remains fixed as the page scrolls beneath it.</p>

		<p>For this example our HTML is three paragraphs of text, in order that we can cause the page to scroll, and a box to which we will give <span class="value_css">position: fixed</span>.</p>

<pre><code class="lang-html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;

&lt;div class=&quot;positioned&quot;&gt;Fixed&lt;/div&gt;

&lt;p&gt;Paragraph 1.&lt;/p&gt;
&lt;p&gt;Paragraph 2.&lt;/p&gt;
&lt;p&gt;Paragraph 3.&lt;/p&gt;</code></pre>

<pre><code class="lang-css">.positioned {
  position: fixed;
  top: 30px;
  left: 30px;
}</code></pre>

		<script async src="//jsfiddle.net/mL3h8au6/embed/result/"></script>

		<h3>Sticky Positioning</h3>
		<p>Sticky positioning is the final positioning method that we have at our disposal. It mixes the default static positioning with fixed positioning. When an item has <span class="value_css">position: sticky</span> it will scroll in normal flow until it hits offsets from the viewport that we have defined. At that point it becomes "stuck" as if it had <span class="value_css">position: fixed</span> applied.</p>

<pre><code class="lang-css">.positioned {
 position: sticky;
 top: 30px;
 left: 30px;
}</code></pre>

	<script async src="//jsfiddle.net/qtkhuecm/embed/result/"></script>

		<div class="note">
			<strong>Note</strong>: to find more out about positioning, see our <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a> article.
		</div>

	</section>

	<!-- Table Layout -->
	<section class="main-section" id="table_layout">
		<header>
			<h2>Table Layout</h2>
		</header>

		<p>HTML tables are fine for displaying tabular data, but many years ago — before even basic CSS was supported reliably across browsers — web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns. This worked at the time, but it has many problems — table layouts are inflexible, very heavy on markup, difficult to debug, and semantically wrong (e.g., screen reader users have problems navigating table layouts).</p>
		
		<p>The way that a table looks on a webpage when you use table markup is due to a set of CSS properties that define table layout. These properties can be used to lay out elements that are not tables, a use which is sometimes described as "using CSS tables".</p>

		<p>The example below shows one such use; using CSS tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for Flexbox or Grid.</p>

		<p>Let's look at an example. First, some simple markup that creates an HTML form. Each input element has a label, and we've also included a caption inside a paragraph. Each label/input pair is wrapped in a &lt;<span class="element">div</span>&gt;, for layout purposes.</p>

<pre><code class="lang-html">&lt;form&gt;
  &lt;p&gt;First of all, tell us your name and age.&lt;/p&gt;
  &lt;div&gt;
    &lt;label for=&quot;fname&quot;&gt;First name:&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;fname&quot;&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for=&quot;lname&quot;&gt;Last name:&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;lname&quot;&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for=&quot;age&quot;&gt;Age:&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;age&quot;&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>

		<p>Now, the CSS for our example. Most of the CSS is fairly ordinary, except for the uses of the display property. The &lt;<span class="element">form</span>&gt;, &lt;<span class="element">div</span>&gt;s, and &lt;<span class="element">label</span>&gt;s and &lt;<span class="element">input</span>&gt;s have been told to display like a table, table rows, and table cells respectively — basically, they'll act like HTML table markup, causing the labels and inputs to line up nicely by default. All we then have to do is add a bit of sizing, margin, etc. to make everything look a bit nicer and we're done.</p>

		<p>You'll notice that the caption paragraph has been given <span class="value_css">display: table-caption;</span> — which makes it act like a table &lt;<span class="element">caption</span>&gt; — and <span class="value_css">caption-side: bottom</span>; to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the &lt;<span class="element">input</span>&gt; elements in the source. This allows for a nice bit of flexibility.</p>

<pre><code class="lang-css">html {
 font-family: sans-serif;
}

form {
 display: table;
 margin: 0 auto;
}

form div {
 display: table-row;
}

form label, form input {
 display: table-cell;
 margin-bottom: 10px;
}

form label {
 width: 200px;
 padding-right: 5%;
 text-align: right;
}

form input {
 width: 300px;
}

form p {
 display: table-caption;
 caption-side: bottom;
 width: 300px;
 color: #999;
 font-style: italic;
}</code></pre>

		<p>This gives us the following result:</p>

		<script async src="//jsfiddle.net/ac9vswhx/embed/result/"></script>

	</section>

	<!-- Multi-column Layout -->
	<section class="main-section" id="multi_column_layout">
		<header>
			<h2>Multi Column Layout</h2>
		</header>

		<p>The multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper. While reading up and down columns is less useful in a web context as you don’t want to force users to scroll up and down, arranging content into columns can be a useful technique.</p>
	
		<p>To turn a block into a multicol container we use either the <span class="property_css">column-count</span> property, which tells the browser how many columns we would like to have, or the <span class="property_css">column-width</span> property, which tells the browser to fill the container with as many columns of at least that width.</p>

		<p>In the below example we start with a block of HTML inside a containing &lt;<span class="element">div</span>&gt; element with a class of <span class="value_css">container</span>.</p>

<pre><code class="lang-html">&lt;div class=&quot;container&quot;&gt;
  &lt;h1&gt;Multi-column layout&lt;/h1&gt;
    
  &lt;p&gt;Paragraph 1.&lt;/p&gt;
  &lt;p&gt;Paragraph 2.&lt;/p&gt;

&lt;/div&gt;</code></pre>

		<p>We are using a <span class="value_css">column-width</span> of 200 pixels on that container, causing the browser to create as many 200-pixel columns as will fit in the container and then share the remaining space between the created columns.</p>

<pre><code class="lang-css">.container {
 column-width: 200px;
}</code></pre>

		<script async src="//jsfiddle.net/j25cL9hn/embed/result/"></script>

</section>

<hr>

	<!-- Summary -->
	<section class="main-section" id="summary">
		<header>
			<h2>Summary</h2>
		</header>
	</section>

	<p>This article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology!</p>

<hr>

	<!-- Reference -->
	<section class="main-section" id="reference">
		<header>
			<h2>Reference</h2>
		</header>
		<p>The readable content of this page was copied from <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction" target="_blank">MDN</a> to be used for educational purposes only.</p>
	</section>

</main>

<div style="clear:both"></div>

<footer>
	This mini-project was made by <a href="https://www.clevious.com" target="_blank">Clevious</a>
</footer>
            
          
!
            
              html {
	height: 100%;
}

body {
	margin:15px;
	background-color: #e8e6e6;
	height: 100%;
}

hr {
	border: 1px solid gray;
}

h1 {
	font-size: 30px;
}

h1, h2, h3 {
	color: #464646;
}

p {
  font-size: 18px;
}

#navbar a {
	display: block;
	color: #fff;
	text-decoration: none;
	font-size:  20px;
	margin-left: 3%;
	margin-top: 20px;
}

#navbar a:active {
	color: red;
}

#navbar, #main-doc {
	display: block;
	border-radius: 4px;
}

#navbar {
	position: fixed;
	float:left;
	width: 23%;
	padding: 1%;
	height: 100%;
	overflow-y: auto;
	background-color: #fff;
}

#main_headline {
	padding: 15px 15px;
	color: #5a5a5a;
}

#links {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #3b81ff;
	border-radius: 3px;
}

#main-doc {
	float:right;
	width: 63%;
	padding: 5%;
	background-color: #fff;
}

.value_css {
	background-color: #e6e6e6;
	color: #36383f;
	padding: 1px 3px;
	border-radius: 2px;
}

.property_css {
	background-color: #ffdfe4;
	color: red;
	padding: 1px 3px;
	border-radius: 2px;
}

.note {
	color: #36383f;
	padding: 20px;
	border-left: 5px solid #fd7a3c;
	margin: 20px 0;
}

#prerequisities_objective div {
	padding: 15px;
	color: #4c4c4c;
	border-left: 5px solid red;
}

.element {
  color:blue;
  font-weight: bold;
}

footer {
	height: auto;
	width: 63%;
	padding: 15px 5%;
	float: right;
	background-color: #1d1e22;
	color: #fff;
	text-align: center;
}

footer a {
	text-decoration: none;
	color: #fff;
}

@media only screen and (max-width: 700px) {
	#navbar {
		display:none;
	}
	#main-doc, footer {
		width: 90%;
	}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console