Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the biggest challenges that most designers have when learning CSS-based layouts is structuring their content correctly. Some are tied to older layout methods like table-based layouts, while others are just brand-new to web design and don't fully understand the strategies behind controlling page elements through CSS. Regardless of whether you fit into one of those categories or not, the foundation for learning proper CSS layout is based in learning to structure your page correctly.
By identifying unique areas of content, you are not only helping user agents properly parse your content, you're also giving yourself the basic page structure needed to control your layout. To give your page the structure, you would use the Div tag. The Div tag is a generic block-level tag that is used to divide your content into specific regions. By using CSS, you can style and position these regions thereby creating your layout. Now, although every page is different, some basic standards have evolved that make laying out your pages a little more efficient.
First, most pages have a wrapper div tag that wraps all other content on the page. This container div allows you to define a width for your page content, center content on the page, and give all other content a reference point by which to position itself by. Inside the wrapper div, you will position other divs that represent your content regions in the order that you wish the content to be accessed. You should never lose sight of the fact that many users may and will encounter your page content un-styled.
In that event, you want to make sure they experience your page in the order that you intended. In the layout we'll be creating, for example, our wrapper will contain a header, navigation, a content region, a sidebar, and a footer. Each of these distinct regions will be styled and positioned based on our design and based on the content contained within. Although this sounds counterintuitive, I've found that my page structure has become increasingly simpler over the years. When I first started doing CSS -based layouts, my pages were unnecessarily complex.
That was because I didn't really understand the goal behind separating structure and presentation. Because I didn't understand how to build efficient CSS layouts, I positioned nearly every single element on the page and needed almost twice as many elements due to this. So, my advice for creating a CSS-based layout is this: keep the page structure simple. Let the structure exist to express meaning, not to fit a predefined design. And as we'll discuss later in this chapter, let the normal document flow of HTML do the bulk of your layout for you.
Normal document flow states that the first block-level element will be displayed on top of the next block-level element. You'd be surprised at how well that handles most of the layout needs you'll have.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66241 Viewers
61 Video lessons · 96758 Viewers
56 Video lessons · 110462 Viewers
82 Video lessons · 105156 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.