Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
CSS Floats quick simple web templates
Rating: 4.1 out of 5(72 ratings)
8,409 students

CSS Floats quick simple web templates

Explore CSS floats to quickly create web page layouts with columns
Created byLaurence Svekis
Last updated 11/2024
English
English [Auto],

What you'll learn

  • Use of floats to rapidly design web pages
  • Create a 2 and or 3 column webpage

Explore related topics

Course content

2 sections • 15 lectures • 53m total length

  • introduction to building quick pages with CSS2:37

    Learn to build quick web pages using CSS floats, creating left and right columns, three-column layouts, and equal-height content areas with simple alignment fixes and background color options.

  • CSS Float resources2:10

    Discover how CSS floats enable quick web templates by altering the document flow with the float property. Use brackets as your editor and placeholder.com images for practice.

  • intro to floats4:53

    Learn to float elements left and right to shape page layout, keep content in the normal flow, and adjust spacing with padding and margins for boxes and images.

  • CSS Float images inline with text6:17

    Explore how CSS floats position images inline with text by floating left or right, wrapping content, and using padding, margins, and max-width: 100% for responsive alignment.

  • CSS float thumbnails5:26

    Learn to build responsive image thumbnails by wrapping images in a thumbnail span, adding padding, borders and a border radius, and floating thumbnails left or right for flexible layouts.

  • Source Code Thumbnails1:22
  • HTML build basic page layout CSS6:10

    Learn to use floats to build basic web layouts with divs, a container, header, and content areas. Center the container and float blocks left or right to create multi-column templates.

  • 2 column CSS site4:12

    Create a two-column web page by floating left and right content divs, set widths to 60/40, and apply a clear fix to clear floats for a stable footer.

  • Create a 2 column page layout in minutes6:19

    Create a two-column page layout in minutes with CSS floats, a full-height sidebar background, and clear fixes to align content.

  • 2 column source code0:39
  • Create 3 column webpage7:07

    Build a three-column webpage using floats for left, center, and right blocks with 33 and 34 percent widths. Use inline-blocks, padding considerations, and a clear fix to keep alignment.

  • 3 column height background color fix3:55

    Build a three-column layout using floats, wrap columns in a container, and apply full-height background colors with percentage widths and a clear fix to align content.

  • Source Code 3 Column Website1:17

Requirements

  • CSS experience
  • HTML knowledge

Description

Using CSS Floats you can quickly create web pages with multiple columns.  This course will show you how to apply CSS floats and how to clear floats to rapidly build out web pages with multiple columns of content areas.

Floats are powerful and often something that new web designers have questions about.  I built this course specifically to help students learn about using floats, what to watch out for and how to apply CSS properties to quickly create a website layout.

The float CSS property specifies how an HTML element should be placed either along the left or right side of its container.  The surrounding elements can then wrap around it.  Floats are commonly used within images to get images inline with the surrounding text as well as to create page columns.   Floats allow you to control the output either to the left or right of the surrounding content.

This course will show you how to use floats in CSS, explore common mistakes and address common questions when it comes to floats.  

Floats allow the content to remain within the normal flow of the page content contrary to when you use positioning.

This course is taught by an instructor with over 18 years of web design and development experience.  Ready to help you learn more about floats and how you can apply CSS to create web pages.

Who this course is for:

  • Web designers
  • Web developers
  • Anyone who wants to learn more about quick webpage layout design

Report abuse