Join Joseph Lowery for an in-depth discussion in this video Understanding document flow, part of Layouts with CSS in Dreamweaver.
Document Flow is an important concept in CSS layouts. Understanding Document Flow will inform how you structure your code, and perhaps more importantly, help you understand what happens with elements that are outside of the Document Flow. So I have four files open here, I am going to use these four files to demonstrate the concept of Document Flow throughout this video. In a nutshell, Document Flow is the order of the code elements. Perhaps the best way to illustrate the concept is to show you what happens when there is no CSS.
So for that let's go to View>toolbars, and that might be found all the way down at the bottom of your page and then turn on Style Rendering. The Style Rendering toolbar is typically used to show different CSS media. So, for example, if I wanted to see how this page would look with the Print Media, I could click that option. And if I just wanted to see it with Screen Media, I would click the first option. All of the various media types are represented. After the media types there is a button that is by default selected that enables and disables CSS Styles.
So I am going to go ahead and click it to turn off the currently on CSS Styles. Now what we're seeing is just the source code without any CSS applied, and this represents the actual code order. After the header and the image, that we have in there, we have the main content area, and if I scroll down, you can see that there is a footer below it. Now this is just a single column layout, I'll toggle back on the CSS Styles just to refresh your memory of what this page actually looks like, and when we turn off the Styles you can see that it flows pretty much as expected.
There is the header, the content, the footer. Let's go to document 2 now, and I am going to turn on the CSS Styles. So this gets a little bit more complex. Now we have a header, a sidebar, a main content area, and the footer. Let's see what happens, let me go ahead and bring down my Property Inspector so we can see this page a little bit easier. Let's see what happens now when I toggle off the CSS Styles.
Again, we have the header up top and now we have the sidebar, that's fine, that's right after the header. And then the main content area where it says Document Flow Example 2 and the footer. Let's move on to Document Flow 3. Now we have the sidebar on the right, not on the left. How is that going to stack up in the code? After the header we have the sidebar, even though that appears on the right. So with CSS we can move it out of the normal document flow and put it over on the right.
The way that's done is actually using the float property. Okay, one last example, Document Flow 4 and now we have both a left and a right sidebar. Let's take a look at the document flow for this. We have a header, sidebar one, that's on the left, sidebar two, that's on the right, and then the content. So as you can see the document flow can be adjusted via CSS.
Both of these sidebars are taken out of the document flow by using the float property. You'll learn more about floats in another video in this chapter entitled Applying Floats Properly. The key take-away here is that if your page's structure seems off, perhaps you should take a look at your document flow, the order of the code, and in the float it or the other way you can break something out of the document flow, absolutely positioned elements.
- 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