Questions Answered
Pseudo classes:
:before, :after
Places content as specified in the CSS before or after the element. Objectionable because it inserts content into the styling (where only form should be specified). See http://www.w3schools.com/css/css_pseudo_classes.asp
Float issues:
Floated elements dropping below the level of their container.
Fixes:
(1) Insert a clear:both after the last floated element
(2) user the property overflow:auto and a width in the container
Inline vs. float
Floats are actual containers. Inline handles text elements “inline”. See http://stackoverflow.com/questions/1702669/what-is-the-difference-between-floatleft-vs-displayinline-while-every-element – example code:
<html>
<head>
<style type=”text/css”>
p.inlinel {display:inline; width: 4em;}
p.inliner {display:inline; width: 4em; text-align: right;}
p.floatl {width: 4em; float:left;}
p.floatr {width: 4em; float: right;}
</style>
</head>
<body>
<p class=’inlinel’>The is an inline paragraph with lots of words.</p>
<p class=’inliner’>The is an inline paragraph with lots of words.</p>
<br/><br/>
<p class=’floatl’>The is a left floated paragraph with lots of words.</p>
<p class=’floatr’>The is a right floated paragraph with lots of words.</p>
</body>
</html>
Global Resets
Sitepoint article – why NOT to use resets
