This week’s class focusing on floats and the box model … examples below

Box Model

box-model.html – nothing too tricky in this one.

Layout

layout.html – have noticed the h1 breaks underneath the nav if the window gets too narrow … but then I guess most people don’t browse with a window 100px wide.

Random Float …

float.html – bit tricky this one, good demo of the vagaries of CSS layout … Firefox behaved impeccably, letting the right box overlap with just { margin-right: 100px } … but this meant the overlap and text were cut off in IE6. The somewhat bizarre solution was to wipe the above and replace with:

{ position: relative; left: 100px; margin-left: -80px }

Wonder how it looks in Google Chrome? We’ll see tomorrow 😉