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>