CODEWITHSUNDEEP
csslayoutpercentage
ThePianist
ThePianist

Reputation: 719

Layout percentage vs. padding

I have an interesting problem that came up more than once. I'll present the last one and uploaded both of them to my server.

I'm taking a tuts+ course about responsive webdesign and as the guy has set 20% for creating 5 grids + 2x5px padding between them, it didn't work to me unless I changed the 20 to 19%.

This is my code:

/* WIDTH SETTING */

.nav-hold,
.image-grid,
.container {
    width:95%;
    max-width:1000px;
    margin:0 auto;
}

/* IMAGE GRID */
.image-grid,
.form-container {
    overflow: hidden; /* because inside the grid, we'll flow elements */
    padding: 5px;
}

.image-grid-square {
    float: left;
    width: 19%; /* each img container's width (5*)19% */
    overflow: hidden; /* because inside the grid, we'll flow elements */
    padding: 5px;
}

.image-grid-square img {
    width: 100%; /* the img inside the container can be 100% big */
    float: left;
}

The only change in his code is the width:20%; (at least what I noticed)

If you guys want to inspect the code deeper, here is my version: http://purpost.me and here is his version: http://purpost.me/tuts

Why his 20% for 5 grids or 25% for 4 grids works perfectly and mine doesn't? :) I'm learning CSS and have a short amount of time to get to know the most of it to use it in a big project. I want to understand the behavior of layouts to be able to build an any type of site. I know frameworks such as Bootstrap, but the command is to use our own codes, so I'm learning as fast as I can. :)

In the course the 300x300 pictures became 188x188, but when I tried it with 20%, mine was 200x200 .. now with 19% its 190x190. I don't understand.

I understand most of the key factors of responsive web-design unless this grid question. I assume I should read a lot about it and try and try and try and in the end I'll be comfortable using it.

I appreciate any help, thanks in advance!

Upvotes: 1

Views: 79

Answers (1)

Airan
Airan

Reputation: 477

Other guy is having reset.css file where he has some css definitions which you are not using. That is why your UI behaves different.

enter image description here

Upvotes: 1

Related Questions