Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
>> Another type of layout that's possible with CSS, but not tables, is commonly called an elastic layout. This refers to its ability to start at a fixed size but expand like a rubber band if needed. These layouts are flexible because they're built with relative units. Their width is relative to the width of the user's font size. This is a pretty strange concept to talk about without seeing it in action, so let's create an elastic layout from one of Dreamweaver's pre-made layouts. We'll follow the same steps that we used for creating the fixed width layout, so go to the File menu and click New.
In the new document box this time, in the layout column, we're going to choose 2 column elastic, left side bar, header and footer. You'll see a different image this time to denote that it's an elastic layout. Again, I'm going to choose HTML 4.0 Strict for the doc type and keep Add to Head for the Layout CSS selected. Click Create. So far, our page looks exactly the same. So let's preview it in a browser. Go to the globe icon on the document tool bar and select preview in Firefox.
Again, we'll be asked to save the pages to our change, so click Yes and save it to the Chapter 3 exercise files folder as elastic.html then click Save. Let's do the same thing we did with the fixed width design and try changing the width of the browser window. So grab the bottom corner and make the window narrower and wider. So far the width hasn't changed and it looks just like the fixed width layout. But now we're going to try changing the size of the text.
Again, you can do that in Firefox by holding down the Ctrl and plus key, or Cmd and plus key, on your keyboard. Resizing the text just one degree has all of the sudden made the layout much wider. If we expand the text one more time, it's even wider still. Now let's hold down Ctrl and dash, or Cmd and dash, to make the text smaller. Every time we hit this key combination, the design gets narrower. This is a characteristic of elastic designs. Because the width of the design changes as the size of the text changes, we have the same number of words on every line at every width.
This allows us to optimize the line length of the text for easier reading. So close Firefox and go back to Dreamweaver so we can see how an elastic layout is made. In the CSS panel, click the All button, and then the plus sign by the style element. Click the second rule down for the container element. This time, if we look at the properties, the width is set to 46em, and em is a relative unit of measure. One em roughly equals two characters of text. So if we change the width value to another number, but keep it in em's, let's try a value of 30 em's, the design changes its initial width.
Less characters are now on every line of text. Let's preview the page in the browser again. We'll have to save changes again to our page. The starting width of our design is much narrower than it was before, but once again changing the size of the text here using control plus or command plus to make it bigger, still makes the overall design wider and maintains the same number of words per line. So you can see how this type of design has an advantage in terms of adapting to the user's preferences.
However, one of the problems with this type of design is that you can quickly generate a horizontal scroll bar in the browser. Let's enlarge the text a couple more degrees to see this. In order to view all of the content on the page, you have to do a lot of horizontal scrolling. The third type of layout that we're going to look at has its pros and cons as well, but generally is considered one of the most accessible types of layouts. Let's create a liquid layout next.
Get unlimited access to all courses for just $25/month.Become a member
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.