CSS Enhancing Design with CSS Finishing Touches Applying Media Queries

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

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; }

3 Answers

Dane Parchment
Dane Parchment
Treehouse Moderator 10,307 Points

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).

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.

Dane Parchment
Dane Parchment
Treehouse Moderator 10,307 Points

Yes! Of course using margin has it's own pitfalls, namely the infamous margin collapse. But you can definitely use margins/padding to layout a site.

However, as you get more experienced with CSS layout you'll learn about FlexBox and CSS Grid, these are the newest and most common modern ways to layout a website nowadays.

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.