How to Build a Web Page to Fit the Screen
Using "div" blocks, you can make your Web pages resize smoothly when site visitors resize their browser. Web developers refer to flexible Web page layouts as liquid layouts. Many pages on the Internet consist of columns laid out in tabular format. For instance, a navigation bar may appear on the left and the main content in the middle. An optional third column on the right may hold advertising or other information. Learning to use "div" blocks will help you design and create liquid pages that adjust to suit the needs of your site visitors.
Other People Are Reading
Instructions
-
-
1
Open one of your Web page documents using Notepad or an HTML editor.
-
2
Add the following code after the first "<head>" tag in the document:
<style type="text/css">
.pageColumn
{
border: dotted;
padding-left:1%;
float: left;
width: 30%;
}
#header
{
border-top: 2px solid green;
clear: both;
}
#footer
{
border-top: 1px solid green;
clear: both;
}
</style>
This code creates three CSS classes. The first class, "pageColumns," sets the layout for all columns on the page. The "width" property, set at 35 percent, defines each column's width. The "float" property makes every column sit to the right side of its neighboring column.
-
-
3
Add this code after the document's "<body>" tag:
<p id="header">Page Header Goes Here</p>
<div class="pageColumn">
<h3>Column 1</h3>
<p> Column 1 text - 1111111111111111111111111111111111111111111111
</p>
</div>
<div class="pageColumn">
<h3>Column 2</h3>
<p> Column 1 text - 222222222222222222222222222222222222222222222
</p>
</div>
<div class="pageColumn">
<h3>Column 3</h3>
<p> Column 3 text - 333333333333333333333333333333333333333333333
</p>
</div>
<p id="footer">Page Footer Goes Here</p>
The first line creates the page's header. The next three "<div>" blocks define the page's columns. Note that each "<div>" references the "pageColumn" class defined in the previous step. The final line creates the page's footer.
-
4
Save the HTML document and open it in your browser. You will see a header at the top of the page and a footer at the bottom. The three columns of text appear between the header and the footer. Each column takes up 30 percent of the browser's horizontal width.
-
5
Resize the browser. Verify that the columns resize proportionally.
-
1
Tips & Warnings
Replace the text in the "<div>" columns with anything you like. Add additional controls such as buttons and text boxes if you need them.
Add additional columns if you need them or remove columns to suit your layout preferences. To add a new column, copy one of the "<div>" blocks and paste it anywhere in the page's "<body>" section. Control the width of the columns by changing the width value in the "pageColumn" class defined in the "<style>" section.
References
Resources
- Photo Credit pc monitor image by Jorge Casais from Fotolia.com
