id = div-before
id = div-1
id = div-1a
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
id = div-1b
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
id = div-1c
id = div-after
After working through the tutorial Learning CSS Positioning in Ten Steps, I learned so much about how different "columns" are set up. More importantly, the difference between position:relative and position:absolute. Relative meaning you can move the element from where it currently sits left, right, top or bottom, and absolute meaning it is removed and placed in a specific spot you would like it to go.
I learned that the word float is the same as text-wrap or a run-around used in the print world and has really helped me start putting these pages together.
For this page, I used a float:left around my "nav" and my "wrapper-1" which contains the graphic has a margin-left:250px and a width:400px. I went one step further and created a "wrapper-2" which contains this paragraph. I set this to a position:absolute; top:150px; left:100px; width:350px; margin-left:600px.
I also went a little further and added 3px of padding to the paragraphs so they aren't butting up a against their div boxes.