Cascading Style Sheets - Page Layout - Part 3

Cascading Style - CGS 2585 Desktop/Internet Publishing Spring 2011 Cascading Style Sheets Page Layout Part 3 Instructor Dr Mark Llewellyn

Info iconThis preview shows pages 1–10. Sign up to view the full content.

View Full Document Right Arrow Icon
CGS 2585: CSS – Page Layout – Part 3 Page 1 © Dr. Mark Llewellyn CGS 2585: Desktop/Internet Publishing Spring 2011 Cascading Style Sheets – Page Layout - Part 3 Department of Electrical Engineering and Computer Science University of Central Florida Instructor : Dr. Mark Llewellyn [email protected] HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cgs2585/spr2011
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CGS 2585: CSS – Page Layout – Part 3 Page 2 © Dr. Mark Llewellyn The CSS Box Model bottom border Content bottom padding bottom margin left margin right margin top margin top border left border right border top padding left padding right padding
Background image of page 2
CGS 2585: CSS – Page Layout – Part 3 Page 3 © Dr. Mark Llewellyn In addition to managing boxes, another powerful technique you can use to organize your layout on the page involves combining floating and clearing using the float and clear properties. Floating an element is a way of moving it out of the normal flow of the document. Elements that follow a floated element will move up and set next to the floated element if there is room. The clear property enables you to stop elements moving up next to a floated element. Floating and Clearing
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CGS 2585: CSS – Page Layout – Part 3 Page 4 © Dr. Mark Llewellyn Suppose that you have two paragraphs and only want the first one to set next to a floated element, even though both paragraphs would fit next to the floated element, you can “clear” the second one so it will be positioned under the floated element rather than along side of it. Over the next few pages we’ll look at these two properties more closely. Floating and Clearing
Background image of page 4
CGS 2585: CSS – Page Layout – Part 3 Page 5 © Dr. Mark Llewellyn The float property is primarily used to flow text around images, however it is also the basis for one of the ways to create multi-column layouts. Let’s start by looking at an example of how to flow text around an image. In the CSS for the < img> element we’ll set the float property to be left as follows: img {float:left; margin:0 4px 4px 0;} This will float the image to the left, so that the text will wrap around it to its right. The float Property
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CGS 2585: CSS – Page Layout – Part 3 Page 6 © Dr. Mark Llewellyn The image is floated to the left of its parent element, which in this case is the paragraph.
Background image of page 6
CGS 2585: CSS – Page Layout – Part 3 Page 7 © Dr. Mark Llewellyn The <p> element does not see the floated <img> element as preceding it in the normal flow. So the <p> element takes the top left corner position of its parent (<body>). However, its content, the text of the paragraph, wraps itself around the floated image.
Background image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CGS 2585: CSS – Page Layout – Part 3 Page 8 © Dr. Mark Llewellyn This time the image is floated to the right of its parent element, which in this case is the paragraph.
Background image of page 8
Page 9 © Dr. Mark Llewellyn Why do we see the white background of the paragraph element here? Why doesn’t it go all the way to the edge like it did in the previous example? Answer:
Background image of page 9

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Image of page 10
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 07/16/2011 for the course CGS 2585 taught by Professor Llewellyn during the Spring '11 term at University of Central Florida.

Page1 / 50

Cascading Style - CGS 2585 Desktop/Internet Publishing Spring 2011 Cascading Style Sheets Page Layout Part 3 Instructor Dr Mark Llewellyn

This preview shows document pages 1 - 10. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online