Static layouts with css
0 likes1,282 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" />