SlideShare a Scribd company logo
1 of 6
Floating
Styling with CSS
Floating
The float CSS property specifies that an element
should be taken from the normal flow and placed
along the left or right side of its container, where
text and inline elements will wrap around it.
A floating element is one where the computed value
of float is not none.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
Floating Values
Left
Is a keyword indicating that the element must float on
the left side of its containing block.
Right
Is a keyword indicating that the element must float on
the right side of its containing block.
None
Is a keyword indicating that the element must not
float.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts.
Floating
Aside from the simple example of wrapping text around images,
floats can be used to create entire web layouts.
https://css-tricks.com/all-about-floats/
Floating
http://www.codecademy.com/courses/advanced-css-positioning/0/1
Floating
Floating images allows images horizontally align with each other and
allows text to wrap around the image. The following will explain
horizontally aligning images and floating images around text.
Floating is a great tool when designing a website. Floating
gives the designer more control of where the text and
images are located on the layout.
http://www.inmotionhosting.com/support/edu/website-design/insert-images-website/align-float-images-css

More Related Content

Similar to Floating power point

Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2
hstryk
 
Lesson2
Lesson2Lesson2
Lesson2
hstryk
 
Css jon duckett - flashcards
Css   jon duckett - flashcardsCss   jon duckett - flashcards
Css jon duckett - flashcards
Chirag Aggarwal
 
10 CSS Tricks and Tips to Create Astounding Websites
10 CSS Tricks and Tips to Create Astounding Websites10 CSS Tricks and Tips to Create Astounding Websites
10 CSS Tricks and Tips to Create Astounding Websites
Syntactics Inc.
 

Similar to Floating power point (20)

Floating
FloatingFloating
Floating
 
Css Introduction
Css IntroductionCss Introduction
Css Introduction
 
Lecture2 CSS 3
Lecture2   CSS 3Lecture2   CSS 3
Lecture2 CSS 3
 
Web Programming Basic topic.pptx
Web Programming Basic topic.pptxWeb Programming Basic topic.pptx
Web Programming Basic topic.pptx
 
Chapter6
Chapter6Chapter6
Chapter6
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Floats
FloatsFloats
Floats
 
Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
 
Lesson2
Lesson2Lesson2
Lesson2
 
Css jon duckett - flashcards
Css   jon duckett - flashcardsCss   jon duckett - flashcards
Css jon duckett - flashcards
 
Css advanced – session 4
Css advanced – session 4Css advanced – session 4
Css advanced – session 4
 
Page layout with css
Page layout with cssPage layout with css
Page layout with css
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
CSS3 PPT.pptx
CSS3 PPT.pptxCSS3 PPT.pptx
CSS3 PPT.pptx
 
Css navbar
Css navbarCss navbar
Css navbar
 
Css from scratch
Css from scratchCss from scratch
Css from scratch
 
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)
 
Web Development 4
Web Development 4Web Development 4
Web Development 4
 
10 CSS Tricks and Tips to Create Astounding Websites
10 CSS Tricks and Tips to Create Astounding Websites10 CSS Tricks and Tips to Create Astounding Websites
10 CSS Tricks and Tips to Create Astounding Websites
 

Floating power point

  • 2. Floating The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none. https://developer.mozilla.org/en-US/docs/Web/CSS/float
  • 3. Floating Values Left Is a keyword indicating that the element must float on the left side of its containing block. Right Is a keyword indicating that the element must float on the right side of its containing block. None Is a keyword indicating that the element must not float. https://developer.mozilla.org/en-US/docs/Web/CSS/float
  • 4. Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floating Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. https://css-tricks.com/all-about-floats/
  • 6. Floating Floating images allows images horizontally align with each other and allows text to wrap around the image. The following will explain horizontally aligning images and floating images around text. Floating is a great tool when designing a website. Floating gives the designer more control of where the text and images are located on the layout. http://www.inmotionhosting.com/support/edu/website-design/insert-images-website/align-float-images-css