Join Joseph Lowery for an in-depth discussion in this video Applying floats properly, part of Layouts with CSS in Dreamweaver.
In the early days of web design, the only way to create a two or more columned…layout was to use tables.…Well this was relatively easy to implement for simple designs layouts, with any…degree of complexity it quickly became a code nightmare, CSS to the rescue.…Now columns and layouts are almost always done with the Float property.…The Float property has certain characteristics.…First off, it takes the element out of the document flow and positions it independently.…The element is shifted to one side, left or right until it reaches the edge of its container.…
Finally, the element maintains its current vertical position without moving up or down.…When you're working with Float there are a couple of tips to keep in mind.…Always, always, always give your floated element a width.…In order to keep the floated elements contained, so that they are within their…container and so that the elements that come after them do not break into the…area, the floats must be cleared.…When a float is cleared, that means that the browser is told to resume…
- Exploring HTML5 templates in Dreamweaver
- Understanding document flow
- Using floats properly
- Resetting CSS styles
- Creating a 1-, 2-, or 3-column layout
- Deciding on a fixed width versus variable width design
- Coding layouts for HTML5 and CSS 3
- Incorporating floated elements
- Applying the faux column technique
- Using Spry widgets
- Using Multiscreen Preview
- Modifying desktop layout for tablets
- Developing smart phone layouts
Skill Level Intermediate
Site Navigation with CSS in Dreamweaverwith Joseph Lowery3h 24m Intermediate
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
Dreamweaver CS5 Essential Trainingwith James Williamson15h 22m Beginner
1. Dreamweaver Example Layouts
2. Layout Concepts
3. Basic Layouts
4. Interior Layouts
5. Alternative Screen Layouts
- 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.