How to Work with Layouts in CSS3 - dummies

How to Work with Layouts in CSS3

By John Paul Mueller

To choose a particular layout in CSS3 from Dynamic Drive, click its link. You see a page that contains a better presentation of the layout at the top. The text contained in the layout is filler so that you can better judge how the layout will feel with content in it. You can try resizing the browser to see how the layout will look at different sizes.


At the bottom of the same page, you see the CSS used to create the page’s appearance. The code appears in an internal CSS <style> tag, but you can easily move it to an external CSS file if desired.


The code provides an entire page you can use for testing. The following steps tell how to access the code.

  1. Click Expand.

    You see the code area of the page expand to show all of the code used to create the layout.

  2. Click Select Code.

    The page selects all of the code in the code area for you.

  3. Right-click the highlighted code and choose Copy from the context menu.

    The precise technique you use varies by browser and platform. For example, you can press Ctrl+C on Windows systems or Command+C on Mac systems to perform the same task. The idea is to get the code placed on the Clipboard.

  4. Open your editor and paste the contents of the clipboard into a new file.

    You see the same example that appeared on the Dynamic Drive site.

  5. Save the new file.

    Use a filename that represents the layout you selected.

  6. Load the file into your browser.

    You see the complete Dynamic Drive example for the layout.

To use the layout on your own page, simply copy the content of the <style> tag to the page you’re creating. It’s safe to ignore the script at the end of the <head> section — its only purpose is to fill the page with sample data.

However, you should make note of the styles used with elements in the page layout. These styles and their associated <div> tags provide the actual layout you see onscreen.