The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

lolcode (1) [Avatar] Offline
#1
Unless I missed something listing 4.9 leaves a wider margin on the right side of the page because the right margin on the media elements adds to the padding.

I came up with a solution that moves the right margin into the nth-child selector. Also since we subtract 1.5em from the width of all media elements we are subtracting it twice. I changed this to 0.75em.

.media {
  float: left;
  width: calc(50% - 0.75em - 1px); /* 0.75 = 1.5em /2 */
  margin: 0 0 1.5em 0;  /* No right margin */
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
}

.media:nth-child(odd) {
  clear: left;
  margin-right: 1.5em;  /* Right margin here only */
}