XHTML - CCIS1301

Lab 6 - Optional

In this lab, we will create a new HTML page and style elements.

Step 1 - Create 3 new pages.

Create 3 new XHTML pages, all with 4 divs - container, header, navigation and content, and name them "absolute.html", "float.html" and "relative.html". The content div on each page should have some lorum-ipsum text.

Step 2 - Layout each page

Using absolute positioning, layout the "absolute.html" page to have the header on the bottom, footer on the top, navigation on the right (200px wide) and the content on the left (600px wide).

Using relative positioning, layout the "relative.html" page to have the header on the top, footer on the bottom, navigation on the left (200px wide) and the content on the right (600px wide).

Using floating, layout the "float.html" page to have the header on the top, footer on the bottom, and the navigation on the left (200px wide) and the content on the right (600px wide).

Add 2 more divs to the relative page called "div1" and "div2". Position "div2" 50px from the top, and 30px from the left in the content div by floating the div. Give div 2 30 px of spacing between the div and the text. Also give div2 a border of 1px solid green.

Place div1 in the bottom right of the content div on your relative.html page. Make it 50px by 10px, with a border of 1 px on the top and left, and a border of 0px on the bottom and right.