Confused about box-sizing

HTML & CSS
1

I am a bit confused about the box-sizing property. For example. I have a list with three li’s in a row. Those three should take up 100% of the parent ul. Now these li’s have a width of 30% and have a padding of 1% on each side. What should be the margin between the first li and the second li and the second li and third li?

I have the following:

.product_grid {
    width: 100%;
    margin-top: 2.5em;
    list-style: none;
    overflow: hidden;
    word-spacing: -1em; // Tip I got from RalphM based on a solution by @PaulOB and @Rayzur to be able to use inline-blocks instead of floats.
}

.product_grid li {
    width: 30%;
    margin: 0 5% 2em 0;
    padding: 1% 1% 3em 1%;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    position: relative;
    background: #E6E6E6;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-spacing: 0; // see explanation above

}

.product_grid li:nth-child(3n+3) {
    margin: 0 0 2em;    
}

This should, if I have understand the priciple right,
take up 100%. Or am I completely wrong

3

The box-sizing: border-box on the LIs says that the padding does not increase the width, so you have 30% width and 5% margin-right times two, plus another 30% width for the third item without margin, equals 100%. The word-spacing does indeed zero out the default spacing between inline-blocks and you should reset it with word-spacing: normal.

4

If product grid is the ul then make sure that the margin and padding are set to zero.

You also need display table on the ul to kill the white space nodes in WebKit.

1 Like
5

…@PaulOB is of course right, as always! I forgot the default margin and padding of the UL, and I didn’t even know the WebKit thing.

6

@PaulOB and @PVgr Thank you both for the replies. It is working fine now. Great

@PaulOB Paul can you please have another look at this page

This is the page that opens when you go to this categorie. I used your (word-spacing) method for grid view. (inline-block instead of floats) But as you can see is it somehow affecting the list view. And I don’t see where. On the grid view it is working fine

Edit:

I am talking about this part

Geschikt voor:
A35 Flexer Revival

Thank you in advance

7

Hi,

I’m a little confused as that page has completely different css to the other page?

The list items are floatred but they are 100% wide which means that they will fill the whole width so there wan’t much point floating them (only if you wanted to contain child floats perhaps).

The image is set at 30% width and floated allowing for the text to be at the side.

This is a completely different set of rules to the inline-block method unless I have looked at the wrong page of course :smile:

8

Hi paul there are two pages with the same items. One is called grid and the other list. This are the URL’s

List:

List page

Grid:

Grid

Please tell what I should do different. On most devices I saw It is working well. The only part I have problems with in the list view is what I mentioned before:

Geschikt voor:
A35 Flexer Revival

Thank you in advance

9

You have the width of the inline-block set to 25% which isn’t enough for the text.

.product_list li p span {
    width: 25%;
}

Remove the width for the list view.

1 Like
10

Pfff. How could I not have seen that :frowning: Thanks a lot Paul.

11

Hi Paul. I need to come back to this issue. With the grid view everything is working fine now both on normal screens as on tablet, using your method with bottom padding on the parent and the absolute position div placed within that space. On the list view however on tablet (portrait) the text is messed up again since I cant use the padding on the parent with the floating image’. What would be my best option?

12

Maybe you could just add some padding-rigght to keep the text away from the cart image.

e.g.

li .product_content {
    display: block;
    padding-right: 35px;
}

You’d have to make it specific to your list view of course.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.