How to Design DIV Boxes
HTML is the underlying language used for designing Web pages. HTML contains a number of elements used for creating sub-divisions in Web pages. Some of these HTML elements include: tables, span tags, layers and DIV tags. DIV tags are often used with CSS style sheets and are popular with Web designers for their flexibility, ease of use and formatting. Using DIV tags you can create different sub-divisions or box sections to hold and format content. Defining a DIV tag is simple and requires the opening <DIV> and closing </DIV> tags.
Other People Are Reading
Instructions
-
-
1
Open Notepad. Type or copy and paste the following code:
<html>
<title>My DIV Boxes</title>
<style type="text/css">
<!--
#box1 {
height: 300px;
width: 300px;
background-color: #003366;
}
#box2 {
background-color: #FF0000;
height: 300px;
width: 300px;
}
#box2 {
float: right;
}
-->
</style>
</head>
<body>
<div id="box1">This is box 1 and its blue</div>
<div id="box2">This is box 2 and its red</div>
</body>
</html>
The preceding code defines two DIV boxes on the Web page by using the open <div> and the closing </div> tags. One is called: box1 and the other is called: box2. The code then uses CSS to define their attributes such as their background color, positions, width and height.
-
2
Click "File," "Save as." Select "All files" as the "Save as type."
-
-
3
Save your file as an HTML file by placing ".html" at the end of the file name. For example: MyBoxDivs.html.
-
4
Go to where you saved your Web page on your hard drive. Double-click on it. It will open in your browser. You should see two DIV boxes, one red and the other blue.
-
1
