Introduction#

note on the chapter layout using css float html book, see demo here

ckad question 1

HTML#

create a html with grid like layout

<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>
    <main>
      <h2>Running tips</h2>
      <div>
        <div class="media">
          <img
            src="https://d2cvlmmg8c0xrp.cloudfront.net/web-css/singapore.jpg"
            class="media-image"
          />
          <div class="media-body">
            <h4>Strength</h4>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
        </div>
        <div class="media">
          <img
          src="https://d2cvlmmg8c0xrp.cloudfront.net/web-css/singapore.jpg"/
          class="media-image">
          <div>
            <h4>Strength</h4>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
        </div>
        <div class="media">
          <img
          src="https://d2cvlmmg8c0xrp.cloudfront.net/web-css/singapore.jpg"/
          class="media-image">
          <div>
            <h4>Strength</h4>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
        </div>
        <div class="media">
          <img
          src="https://d2cvlmmg8c0xrp.cloudfront.net/web-css/singapore.jpg"/
          class="media-image">
          <div>
            <h4>Strength</h4>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
        </div>
        <div style="clear: both;"></div>
      </div>
    </main>
  </div>
</body>

Float#

quoted from the css book the original idea of float is A float pulls an element (often an image) to one side of its container, allowing the document flow to wrap around it.

the css to float the media

.media {
  float: left;
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
  margin: 0 1.5em 1.5em 0;
  width: calc(50% - 1.5em);
}
.media:nth-child(odd) {
  clear: left;
}
img {
  width: 200px;
}
.media-image {
  float: left;
  margin-right: 1.5em;
}
.media-body {
  margin-top: 0;
}
.media-body h4 {
  margin-top: 0;
}

Note that the floated element does not contribute to the height, so we need a clear to fix it (see it from the html bottom of main). Also take a look at the calc width

.media {
  float: left;
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
  margin: 0 1.5em 1.5em 0;
  width: calc(50% - 1.5em);
}

Clearfix#

another option is using main::after

.clearfix::after {
  content: "",
  display: block, 
  clear: both 
}

then apply this to the main

<main class="clearnfix">
</main>