root
/
css-mastery-16-master


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334
							<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Media Object, no clearing</title>

  <style type="text/css" media="screen">
    /**
    * 1. Notice how this will not show, as the block collapses in height.
    */
    .media-block {
      background-color: gray; /* 1 */
      border: solid 1px black;
    }
    .media-fig {
      float: left;
      width: 30%;
    }
    .media-body {
      float: right;
      width: 65%;
    }    
  </style>
</head>
<body>
  <div class="media-block">
    <img class="media-fig" src="img/pic.png" alt="The pic" />
    <div class="media-body">
      <h3>Title of this</h3>
      <p>Brief description of this</p>
    </div>
  </div>
</body>
</html>