Creating Page Divisions Chapter 9 Creating Page Divisions
Learning Objectives Pros and cons of using tables to format content within an HTML page How to create a page division using the <div> and </div> tag pairs How to create dynamic page content that scales in relation to the browser window size
Creating Page divisions Using the <div> and </div> pair, you can define a container for styling related components in the HTML page.
Using a division to apply a style <DOCTYPE! html> <html> <body> <p>This is paragraph 1</p> <div style="background:blue; color:white;"> <p>This is paragraph 2</p> <p>This is paragraph 3</p> </div> <p>This is paragraph 4</p> </body> </html>
Using divisions to create columns <DOCTYPE! html> <head> <style type="text/css"> .Start { background-color:red; width:200px; height:200px; position:absolute;left:0px; top:0px; } .Middle { background-color:white; width:200px; height:200px; position:absolute;left:200px; top:0px; } .End { background-color:blue; width:200px; height:200px; position:absolute;left:400px; top:0px; } </style> </head> <html> <body> <div class="Start"> </div> <div class="Middle"> </div> <div class="End"> </div> </body> </html>
Placing text in the columns <DOCTYPE! html> <head> <style type="text/css"> .Start { background-color:red; width:200px; height:200px; position:absolute;left:0px; top:0px; } .Middle { background-color:white; width:200px; height:200px; position:absolute;left:200px; top:0px; } .End { background-color:blue; width:200px; height:200px; position:absolute;left:400px; top:0px; } .pad { margin: 0px 10px 10px 10px; } </style> </head> <html> <body> <div class="Start"><p class="pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</P></div> <div class="Middle"><p class="pad">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p></div> <div class="End"><p class="pad">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui</p></div> </body> </html>
Simulating table layout <DOCTYPE! html> <head> <style type="text/css"> .CenterAll { width:800px; margin-left: auto; margin-right: auto; } .Outer { background-color:white; width:800px; text-align:center; border:1px solid black; } .Column { width:400px; text-align:left; float:left; } .Clear { clear: both; } .pad { margin:5px 5px 5px 5px; } </style> </head> <html> <body bgcolor="lightblue"> <div class="CenterAll"> <div class="Outer"> <div style="border:1px solid black;"> <img src="http://www.WebSiteDevelopmentBook.com/Chapter09/Pets.jpg"/> </div> <div class="Column"> <p class="pad">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a tellus vitae quam elementum interdum quis a massa. Etiam interdum bibendum leo, rhoncus convallis turpis sodales tempus. Sed eget orci ac felis mollis pretium. Aenean et elit vitae lorem blandit aliquam et viverra risus. In blandit, risus ac commodo pharetra, risus magna tincidunt ante, at posuere odio odio eu enim. Phasellus libero dui, eleifend a eleifend eget, tempor et libero. Curabitur porta posuere dictum. Morbi cursus nulla auctor neque semper euismod. Nullam odio tortor, venenatis at vehicula pulvinar, lobortis nec nisl. Nam consequat cursus nibh quis tincidunt. Vivamus sed libero quis mauris facilisis placerat.</p> </div> <div class="Column"><p class="pad">Integer et mauris massa. Praesent porttitor varius vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam ligula et risus imperdiet vestibulum. Nullam ut metus a tellus dignissim convallis in ac augue. Etiam fermentum felis quis leo suscipit a scelerisque ante imperdiet. Morbi vestibulum scelerisque viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at arcu mauris. Sed est arcu, placerat feugiat porttitor et, cursus eget nulla.</p> </div> <div class="clear"></div> </div> </div> </body> </html>
Creating a sizeable page <DOCTYPE! html> <head> <style type="text/css"> .Start { background-color:red; width:20%; height:100%; float:left; } .Middle { background-color:white; width:20%; height:100%; float:left; } .End { background-color:blue; width:20%; height:100%; float:left; } .pad { margin: 0px 10px 10px 10px; } </style> </head> <html> <body> <div class="Start"><p class="pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</P></div> <div class="Middle"><p class="pad">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p></div> <div class="End"><p class="pad">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui</p></div> </body> </html>
Real world: Using Divisions to stack text <DOCTYPE! html> <head> <style type="text/css"> .Start { background-color:red; width:200; height:200; position:absolute; top:100; left:100; z-index=0; } .Middle { background-color:yellow; width:200; height:200; position:absolute; top:200; left:250; z-index=1; } .End { background-color:blue; width:200; height:200; position:absolute; top:100; left:400; z-index=2; } .pad { margin: 0px 10px 10px 10px; } </style> </head> <html> <body> <div class="Start"><p class="pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</P></div> <div class="Middle"><p class="pad">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p></div> <div class="End"><p class="pad">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui</p></div> </body> </html>
summary For years, developers have made extensive use of tables to format content within a web page. Developers will argue that the use of tables for formatting is safe because browsers, all browsers, will render the content correctly. Unfortunately, the use of tables for content formatting, particularly nested table, can lead to code that is difficult to maintain and possibly large in size, which increases download times. As an alternative formatting technique, developers are moving to page divisions, which are essentially web-page containers within which they can group related HTML tags for styling and positioning. To create such containers, developers use the <div> and </div> tag pair.