A Pen by Marcelina Redocindo on CodePen.
MARCELINA BONDOC REDOCINDO marcelinaredocindo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <div class="wrapper"> | |
| <article class="flow"> | |
| <h1>CSS Position Property</h1> | |
| <figure class="callout"> | |
| <p> | |
| Change the <code>position</code> style to see how the box behaves, both relative to its parent and the viewport. | |
| For <code>position: sticky</code> and <code>position: fixed</code>, make sure you scroll to see the effect. | |
| </p> | |
| <p> |
marcelinaredocindo
/ image-float-css-layouts.markdown
Created
December 14, 2025 14:11
Image float, CSS Layouts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <span>These two elements</span> <span>are normal spans, that are <code>display: inline</code> by default</span>. | |
| <p>This <span>span element</span>, inside a paragraph element is <code>display: inline-block</code>, so its top margin will no longer be ignored. | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <div class="wrapper flow"> | |
| <article class="flow"> | |
| <h1>Multi column grid</h1> | |
| <figure class="callout"> | |
| <p>Each of the items share 1 of 8 portions of the remaining space equally with a consistent <code>1rem</code> gutter between each item.</p> | |
| </figure> | |
| <div class="my-element"> | |
| <div class="box">Item 1</div> | |
| <div class="box">Item 2</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <article> | |
| <h1>Using a <code>ch</code> unit to size text</h1> | |
| <p>The <code>ch</code> unit allows you to control the size of text based on its actual contextual size—the width of a <code>0</code> character. | |
| This means that if you set the max width of some text as <code>70ch</code>: regardless of the size of that text, you can always be sure that it will be at most, 70 characters wide. </p> | |
| <p>Go ahead and change the font sizes and max widths of these elements in the CSS editor to see it working.</p> | |
| </article> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <div> | |
| This div is 10% of the viewport. | |
| </div> | |
| <p>This paragraph is limited to <code>60ch</code> which is the same width as 60 “0” characters in the rendered font.</p> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <p>The transform is calculated from the elements width, which is 50% of the container’s width.</p> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <p>Both top margin and left padding are 150px.</p> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <p>This p element is 50% of the div’s width, which is 150px.</p> | |
| </div> |
NewerOlder