Flow Example 2

This is a simple example of block-level flow using div elements.

HTML

<div class="myDiv">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="myDiv">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="myDiv">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

CSS

/*
 * Try this:
 * 1. Explain why it is unecessary to specify the height property in this example
 * 2. Replace display:block with display:inline-block;  (spaces between blocks)
 * 3. Replace display:inlin-block with float:left;  (no spaces between blocks)
 *    Note that this property uses an implicit display:block;
 * 4. Change one of the properties so there's space around the div elements
 * 5. Replace margin value to get spacing between blocks and repeat
 * 6. Change display:block to display:inline
      You'll get a mess. Why?
 */

.myDiv {
    display:i;   /* This is redundant for div elements. Why? */
    width: 100px;
    border-style: solid;
    border-color: goldenrod;
    border-width: 15px;
    margin: 0px;
    padding: 10px;
    background-color: palegoldenrod;
    color: black;
}

#outer {
    width: 300px;
    height: 400px;
}

body {
    margin: 0;
    padding: 0;
    border:0;
    background-color: steelblue;
}