Peter: Created page with "Using floats to set the structure of your web page HTML tables vs CSS floats == Upgrade your code! == To upgrade from a main page table, to using floats instead, is painless == An example! == * [http://red.asterix.co.za/build/ Red's /buld] website uses a main page table * [http://red.asterix.co.za/demo/ Red's /demo] website uses floats …tables are messy and floats are easy === Float left and right === First build your Home page...."

2023-11-25T18:48:41Z

Created page with "Using floats to set the structure of your web page HTML tables vs CSS floats == Upgrade your code! == To upgrade from a main page table, to using floats instead, is painless == An example! == * [http://red.asterix.co.za/build/ Red's /buld] website uses a main page table * [http://red.asterix.co.za/demo/ Red's /demo] website uses floats …tables are messy and floats are easy === Float left and right === First build your Home page...."

New page

Using floats to set the structure of your [[web page]]

[[main page table|HTML tables]] vs CSS floats

== Upgrade your code! ==

To upgrade from a [[main page table]], to using floats instead, is painless

== An example! ==

* [http://red.asterix.co.za/build/ Red's /buld] website uses a [[main page table]]
* [http://red.asterix.co.za/demo/ Red's /demo] website uses floats

…tables are messy and floats are easy

=== Float left and right ===

First build your Home page..

* Place your [http://red.asterix.co.za/demo/float_1.html logo], almost full width of screen
* Float your [http://red.asterix.co.za/demo/float_2.html collaboration] division (with a table) to the right hand side
* Float your [http://red.asterix.co.za/demo/float_3.html menus] division (with tables) to the left hand side
* Add your [http://red.asterix.co.za/demo/float_4.html centre] division (a single column table)

==== Clear fix ====

* Add your [http://red.asterix.co.za/demo/index.html footer] with a clear fix (to keep your footer at the bottom)

==== Template ====

* Finally, remove your [http://red.asterix.co.za/demo/template.html centre] to obtain your template!

Now use your template to create your [[web page|other pages]]. Also watch what [http://www.asterix.co.za/build/ Asterix's /build] website for additional training on how to do this

== Notes ==

* The structure of your [[web page]]s must be replicated consistently across all your [[web page]]s. Starting from a template helps you to do this!
* For first term, everything on your [[web page]] had to be in a [[main page table]], but now we have upgraded to using floats

<small>
[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]
</small>

[[Category:Design]]

Float - Revision history