Github and Website Workshop/three-column-section

Welcome to Challenge 9 of the Github and Website Workshop - creating a section with three cells

Text is often organized in columns to create the illusion of sub-sections

The goal of this challenge is to create a section with three cells.

HTML

<section id="fun-facts"> will house the entire section

<div class=”three-items”> will house the row the contains the three cells

<div class=”an-item”> will house an individual cell

<div class=”item-text”> will house the text for an individual cell

• We will use <div class=”item-text”> to create padding between the cells

Question: why can’t we simply use <div class=”an-item”>?

• Hint: we are setting the width of each cell to be 33% (⅓ of 100%), what would padding do to the width?

Challenge: add divs to index.html following the above guidelines

Solution code

CSS

Like the navigation bar, we want the content to appear on the same line (instead of being stacked on top of each other). Therefore, we will utilize “display: inline-block”

div.three-items {
   display: block; /* display block is default for divs - this is the difference between between div and span */
   text-align: center;
   width: 100%;
}

div.an-item {
   display: inline-block; /* this element is block but will be flowed with surrounding content as if it were a single inline box (kind of like span) */
   width: 33%;
}

Challenge: creating padding between the cells

• Hint: use div#item-text to do so

Challenge: add images above the text in each cell and make them circular

• Hint: define a class in <img> and use “border-radius: 50%” in the CSS

Save the changes and reload index.html. When you’re satisfied, commit and push the changes.

Next: Challenge 10