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 😉