Skip to content

Instantly share code, notes, and snippets.

@purplejacket

purplejacket/css_positioning_divs.html

Created November 17, 2015 18:46
Show Gist options
  • Save purplejacket/673ab0cdf6ba802d0a1c to your computer and use it in GitHub Desktop.
Save purplejacket/673ab0cdf6ba802d0a1c to your computer and use it in GitHub Desktop.
Download ZIP
Learn CSS Positioning in Ten Steps
Raw
css_positioning_divs.html
<div id="example">
<div id="div-before">
<p>id = div-before</p>
</div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div id="div-1c">
<p>id = div-1c</p>
</div>
</div>
</div>
<div id="div-after">
<p>id = div-after</p>
</div>
</div>
@purplejacket
Copy link
Author

This is the HTML that is manipulated on this great tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment