Static layouts with css
0 likes1,286 views
This document discusses CSS layout basics including display, float, clear, and box model properties. It explains that display: inline is used for text elements that fill containers, display: block is for structural elements that can be sized and stacked vertically. Floating elements left or right allows horizontal stacking until the container is filled. Clearing floats with clear: both resumes vertical stacking and gives containers height and width.
Static layouts with css
- 1. Static layouts with CSS How to layout webpages using the display, float, clear, and properties
- 2. CSS layout basics, in 10 slides
- 3. CSS layout basics, in 10 slides
- 4. display: inline • Used mostly for text, which “fills up” its container • Inline element types include span, a, strong, em, and (confusingly) img • New elements go on the same line, immediately after the previous one
- 5. Inline span elements <span class="first">Lorem ipsum dolor ...</span> <span class="second">Ut enim ad minim veniam, ...</span>
- 6. display: block • Structural elements that allow you to set width/height, margins, padding and borders • Block element types include div, p, form, h1, h2, h3, etc. • New elements stack vertically
- 7. Block div elements <div class="first">Lorem ipsum dolor ...</div> <div class="second">Ut enim ad minim veniam, ...</div>
- 8. CSS Box Model Block only • width, height • padding • Inline + block border • margin Diagram by Rich Hauck
- 9. float: left, float: right • Floating causes block elements to stack horizontally • Elements keep stacking until the container width is filled • Additional elements are added below, much like inline content does
- 10. Floated divs <div class="float">Lorem ipsum dolor sit amet</div> <div class="float">consectetur adipisicing elit,</div> <div class="float">sed do eiusmod tempor incididunt</div> <div class="float">ut labore et dolore magna aliqua.</div> <div class="last float">Ut enim ad minim veniam</div>
- 11. clear: both • Clearing your floats is necessary to resume vertical stacking • It also has the effect of giving the parent a height & width • You can assign “clear: left” and “clear: right,” but sticking to “clear: both” is simpler
- 12. Clearing the floats <div class="float">Lorem ipsum dolor sit amet</div> <div class="float">consectetur adipisicing elit,</div> <div class="float">sed do eiusmod tempor incididunt</div> <div class="float">ut labore et dolore magna aliqua.</div> <div class="last float">Ut enim ad minim veniam</div> <br class="clear" />
- 13. Floating left and right Note that b comes “before” a with float: right <div class="left">← left a</div> <div class="left">← left b</div> <div class="right">right a →</div> <div class="right">right b →</div> <br class="clear" />