HWG HTML5 course assignment 2

NOTE: Page left intentionally ugly with colours and overflowing and clashing text to prompt discussion in subsquent weeks how to use these "containers" more efficiently, for example have them also re-size or otherwise.

Week 2: HTML5 Sections, Containers, Boxes and Shapes

HTML5's Built-In Sections
Creating Custom Containers
Decorative Boxes and Shapes
CCS3 and HTML5's Built-In Containers
Custom Drop Shadows

An article

Requirements

What I'd like you to do this week is create a layout with HTML5 structural elements similar to the one I showed you. What I'm looking for here is to make sure you understand the concept of structural elements.

A figure with NO float

Please place a border around each element using CSS property border: 1;

A figure with LEFT float

Also, feel free to colorize, round the corners, or add drop shadows as your see fit. This is not mandatory, though. Again, all I really want to see here is that you understand the containers concept.

A figure with RIGHT float

This is additional arbitary text to see how it flows (or floats) around the figures that have been added within this container.

An aside

The discussion of the float property is very important to laying out your pages--especially adapting your pages to several different screen sizes. Who can tell me why?

The use of the float clause seems to allow text to flow around the object/section/container that the clause has been applied to. On this page the base CSS "figure" container has no float applied, but two additional "figure" containers have been deployed to the page using inline styling, the first has float"left and the second float:right stle.

Another observation is that if the CSS3 containers are used, but page text is outside a sub-container, then the sub-containers appear after the text, but this then causes per the flowed text other containers to be over-written. On this page are "nav" and a "footer" container, but these aer in the main hidden behind the "article" and the "aside" containers.

My take home with this is that if you are going to use these containers then make sure they are right sized. More experimentation will be needed.

A simple view of CSS3 sections is available from this link. Further if you have more text than will fit inside the container the text will flow outside of the container without resizing it and "CLASH" with subsequent text. Maybe there are ways to fix this :) I will come back to this item another time.