Floats can be used to create column layouts often used for grid designs. Learn how to use floats to create a two-column layout for the content in your projects.
- [Instructor] Before we go any further…with our CSS in our project,…let's add the box model fix.…We can copy this snippet from paulirish.com,…and add it to our CSS file.…This is going to go at the very top of our style sheet.…This is about as global as it gets,…since this style is applied…to every single element on the page.…Now let's go back to the header in the HTML.…I've added an extra paragraph just to demonstrate…how to keep the text from flowing underneath.…So this is what it currently looks like right now.…
The first step is to put a box…around all of the text elements…to group them as one component.…Let's go back to the HTML file.…We'll use a div tag to create the container…because this is only for styling purposes.…And we'll add a class as well.…Let's name it something descriptive.…We're going to be creating two columns,…so we can call it something like column left or right,…or column narrow or wide.…I'm actually going to abbreviate my column to just col.…C-O-L.…And go with col narrow, and col wide.…
I'll be using these column styles again to align the content…
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property
Skill Level Beginner
1. Getting Started
2. CSS Core
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.