Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
>> As we saw in the last movie, liquid width designs can improve accessibility by offering web users an even greater range of control over the page to suit their needs. We're going to use the page saved in the last movie name liquid.html as the start of an example site to build. If you're following along with the exercise files and do not already have liquid.html open in Dreamweaver from the last movie, it's located in a folder named 03_06 in the chapter three folder of your exercise files. We'll begin our customization of this page by changing some width values to better suit a wider variety of designs and make it a little more robust.
Right now, both of the columns have liquid width. Let's preview the page in Firefox to see that again. Click on the globe icon in the document tool bar and choose preview in Firefox. Narrow your browser window as you did before. You can see that both columns change in size and the sidebar gets very narrow when the window is narrow. Long words are overflowing out of the sidebar and overlapping with the main content. Fortunately we can change the design to make the side bar have a fixed width while keeping the overall layout liquid.
So close Firefox now and go back to Dreamweaver. In the CSS styles panel, click the all button and make sure that all rules are displayed under the style element. Select the fifth rule in this list that's labeled side bar one. In its properties below we can see that its width is currently set to 24 percent. Click on 24 percent and Dreamweaver will bring up two select menus. The first is for a value, so enter 200 here. The second menu is where we choose the unit of measurement for this width. Click on the arrow in the menu and choose pixels, the top option.
The width of the sidebar immediately changes in the design view of the page. Scroll down the page in design view and you can see that now the main content is wrapping underneath the bottom of the sidebar somewhat. This is because the space that the sidebar occupies is created with the left margin on this main content DIV. We need to change that left margin to match or exceed the width of the sidebar. Go back to the CSS styles panel and choose the rule for the main content DIV. It has a single property listed for margin with four values shown, one for each side of the DIV.
The first value is for the top margin, the second for the right, the third for the bottom and the fourth for the left. You can remember this order by thinking of going around a clock in clockwise manner from top all the way back up to the top. So click on the list of values and this text will become editable, change the 26 percent to 230 PX for pixels. This extra thirty pixels is there to provide space between the columns. Click outside of the rule and immediately the design view changes to show the new margin.
We now have a straight left margin on our main content like we did before. Let's preview in Firefox again to see how this has changed our page. Click on the globe icon and choose preview in Firefox. It will ask us if we want to save the changes to the page, so click yes. You can see that now the content is no longer overflowing out of the sidebar, but now the main content has less room and is overflowing. If we resize the window to make it larger, this is fixed and the sidebar doesn't change width, but this can become a problem with very narrow windows.
To avoid problems to our design at very extreme browser widths or font sizes, we can set a minimum and a maximum width for our layout. Close Firefox and go back to Dreamweaver. In the CSS styles panel, choose the container rule at the top of the all rules listing. Select the width property that is listed and simply click on the trash can item to delete this property entirely. As soon as we do this, the design adjusts to fill the entire design view. It will also now fill the entire browser window, no matter how wide or narrow, so we probably want to set a minimum and a maximum width to avoid the problems that we saw with very narrow windows having content overflow and overlap.
Still in the container rule, click on the add property link in the properties pane of the CSS styles panel. A select menu appears, begin typing M I N and then click on the arrow in the select menu and you will see a full listing of CSS properties that are available. Based on what we began to type in, Dreamweaver has jumped down the list to properties that might match. It has MIN HEIGHT selected. We're going to choose MIN WIDTH instead. Now two more boxes appear. In the first text field that Dreamweaver has placed your cursor in, type 500.
In the select menu beside it leave pixels selected as the unit of measurement. We're going to follow these same steps for setting a maximum width on this DIV. The final value that we're going to use for our maximum width is 1600 pixels, but because that's wider than our current screen, we're going to first set a value of 800 pixels just so we can preview it in the browser and make sure that it's working. So click on the add property link, type in MAX, then click the arrow in the Select menu, scroll down and choose MAX WIDTH from the list of CSS properties.
In the text field that appears, type 800 and leave pixels selected as the unit. Now let's preview our page. Click on the globe icon and select preview in Firefox. Again, when asked to save the changes, click yes. Grab the corner of your Firefox window and make the design larger. The text reflows up until a certain point and then it simply stops as if it's a fixed width design. This also happens if we narrow the window.
Try making your window more narrow. Again, the design gets less wide until it hits a certain point and snaps into a fixed width. You can add a minimum and a maximum width to your liquid layout in order to keep it flexible, but still keep it compatible with any size limitations you have on your content. One thing to note is that Internet Explorer 6 does not support the MIN WIDTH and MAX WIDTH properties. The design will still work just fine in this browser, but it won't snap to this fixed widths when it gets to narrow or too wide, it will just continue expanding or getting smaller.
Click on the 800 pixels shown inside the MAX WIDTH property and type 1600. The appearance of the page won't change at this point, but if testing it in a browser at a width greater than 1600 pixels, you'll see it snap to that maximum width. So in this movie, you've seen how to adapt a liquid layout to accommodate a greater range of content without overflowing or overlapping. We've made the side bar fixed in width but kept the overall layout liquid up until a certain minimum and maximum width was reached.
Get unlimited access to all courses for just $25/month.Become a member