Solution First, mark out the areas of the form into two different sections using div elements: Register Login Email Address Confirm Address Password Confirm Password Contact Information First Name Last Name Address 1 Address 2 City State or Province Zip Country Then set the display property of the input and label elements to block: label { margin-top: .33em; display: block; } input { display: block; width: 250px; } Create the second form column by setting the first div element, register, to float left, as shown in Figure 8-16: 8.15 Designing a Two-Column Form Without Tables | 423
Chapter 1 CHAPTER 1 General 1 1.0 Introduction Cascading style sheets (CSS) provides a simple way to style the content on your web pages. CSS may look complicated to the first-time CSS user, but this chapter shows how easy it is to use CSS. The recipes provide the basics to get you started with CSS. After you write a few lines of HTML page, add a little CSS and you immediately see the results. Here’s an exercise with the traditional “Hello, world!” example. First, open a text editor or a favorite web page editing tool and enter the following: CSS Cookbook Hello, world! Save the file and view it in your web browser. This line is nothing special as you can see in Figure 1-1. Figure 1-1. Default rendering of HTML text without CSS 1
Share
