CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

György Varga
György Varga
19,198 Points

Columns not working with

Hi!

If I am making the colums width to be sumed up 100% the second or at larger screens the third colum get lower. So in the two column layout if I make the primary column width 50% and the second too it will get below each other. If I am making the width: 40-50 it works.

Can you please help me? https://w.trhou.se/l2q8bd38l0 Thank you!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

For some reason, the snapshot you have posted here is entirely empty. There is a directory but no files. Can you please try recreating the snapshot and linking it again?

György Varga
György Varga
19,198 Points

Thanks! I updated my post!!

2 Answers

Patrik Horváth
Patrik Horváth
11,082 Points

hi, you have to delete your margin / paddings and you will be able use 50% and 50% but if you have border or shadow you will not be able use it, then just make both 49% hope you understand :smile: also use box-sizing :)

why ? because basing website have always Margin ( no padding ) in TOP and LEFT :) so just do

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

I dont understand what * comes from. I also got the same fimiliar so I set it to 40% then it worked..

Patrik Horváth
Patrik Horváth
11,082 Points

"*" mean all tags in whole site get this properties you just cant give 50% and 50% without setting this settings because browsers have its own default margin or padding ... so with this you overwrite them :)