Enhancing Design with CSS, Applying Media Queries video. Anwar Montasir says "And looks like it's problem solving time.

Question

Video time 07:08   
Well I'm questioning this part as he uses calc to work out something complex,
where i simply use float left and the web page columns are side by side and
work beautifully at different viewport sizes. 
His version.
.column:first-child {
      margin-right: calc(4% - 4px);
      margin-bottom: 0;
}
My version.
.column:first-child {
      margin-right: 4%;
      margin-bottom: 0;
      float: left;
}

Dane Parchment · Accepted Answer

Well one big reason he isn't using floats is because we no longer use floats for layouts. In fact, float should have never been used for layouts because that was not their intended purpose. Floats were designed to determine how text flowed around images. It also led to the infamous 'clear floats' that is required whenever you use a float and you aren't using here.
With that in mind a lot of what can be done with floats could be done with existing css namely margin and padding. It's jus that it was more complicated to visualize and often required a lot of math. 
So while yours may indeed work, it is not using modern best practices (you'd either use margin/padding, flexbox, or css grid).

Moe Set · Answer

/* Web Fonts ----------------------- */
@font-face{
  font-family:"Abolition Regular";
  src: url("../fonts/abolition-regular-webfont.woff") format('WOFF');
}
/* Base Styles --------------------- /
* {
  box-sizing:border-box;
}
html {
  font-size: 1.25rem; / 20px on most screens */  
}
body{
  color:#453969;
  font: 300 100%/1.5 'Work Sans', sans-serif;
  margin:1rem;
}
a {
  color:#cc4e13;
  text-decoration:none;
}
h1,h2{
 font: 400 4rem/1.1 'Abolition Regular', Impact,Charcoal,sans-serif;
}
h1::after{
  content:"\2193"; 
  display:block;
}
h2{
  font-size:2.5rem;
}
h3{
  font-size:1.25rem;
}
img {
  width: 100%; /*responsive images */
  border-radius:12px;
}
/* Main Styles --------------------- */
header{
  text-shadow: 6px 10px 10px rgba(0,40,20,.5);
  padding:10vh 1rem;
  margin:-1rem -1rem 1rem;
  background:url(../img/mountains.jpg) center/cover no-repeat   #ff00ff;
  background-blend-mode:normal;
  color:white;
}
header,footer{
  text-align:center;
}
.title{
  letter-spacing:1px;
}
main{
  max-width:1000px;
  margin:0 auto;
  hyphens:auto;
}
section{
  margin:4rem 0;
  border-bottom:3px solid #9599a9;
}
wildlife{
  padding:20% 15%;
  border-top:12px solid #f3753b;
  border-radius: 12px 12px 0 0;
  background: url(../img/bear.jpg) center/cover no-repeat #454959;
  color:white;
  box-shadow: inset 0 0 20px 10px rgba(0,20,30,.5);
}
wildlife a{
  color:#f7a27c;
}
.callout{
  display:block;
  width:250px;
  padding:.25rem 1rem;
  border-radius:20px/10px;
  margin: 1rem auto;
  box-shadow: 1px 2px 3px rgba(0,10,20,.5);
  background-image: linear-gradient(135deg,rgba(255,255,224,.8) 0%, rgba(250,100,50,.2)50%), linear-gradient(#b40 0%, #d63 50%, #c51 50%, #e74 100%);
  color:white; 
  text-align:center;
  font-size:1.125rem; 
}
.column:first-child{
  margin:4rem;
}
/* Media Queries ------------------- */
@media screen and (min-width: 800px){
  header{
    padding:20vh 1rem;
  }
  h1{
    font-size: 5rem;
  }
  h1::after{
    margin-top:2rem;
  }
  .title{
    font-size:1.25rem;
  }
  .intro{
    padding:0 15%;
    font-size:1.1rem;
  }
  .column {
    display: inline-block;
    width: 48%;
    margin-right: 0px;
  }
  /.column:first-child{
    margin-right:4p%;
    margin-bottom:0;
  }/
}
Hello everyone, I have a problem. in a course work (.column- display :inline-block and my width is didin't work at 48%,only 40% is work. Someone can explain please?

ja5on · Answer

I just did a small course here at treehouse called The Calc() Function wow I can see the way to go now - Thanks for your advice.

ja5on · Answer

So like you said I could just use margin:-                                                                                                                                                             
margin-right: 40px;                                                                                                                                                                             
which looks just great in fact I could use any px from I'd say 20 to 44,  which is a simpler approach.

Welcome to the Treehouse Community

Looking to learn something new?

ja5on

ja5on

Enhancing Design with CSS, Applying Media Queries video. Anwar Montasir says "And looks like it's problem solving time.

4 Answers

Dane Parchment

Dane Parchment

ja5on

ja5on

Dane Parchment

Dane Parchment

ja5on

ja5on

Moe Set

Moe Set

wildlife{

wildlife a{