How do I center this code in the middle of the page?

HTML & CSS
82

It’s still collapsed.

83

You can see here: http://www.cssdesk.com/Mqxgh

84

And it’s gonna stay collapsed until properly fixed.

BTW - where did you get the idea that <span> tags are empty tags? They are NOT.

This is invalid HTML. It needs to be properly closed.

<span class='item-line'/>
85

I cleaned up the code: http://www.cssdesk.com/Mqxgh

86

Are you saying you don’t know right now how to prevent it from collapsing?

87

I was reading this, I don’t know if it has anything to do with that. http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing

88

Now explain why you have left and right padding of 51px in the flexbox code and wonder why it is wider than the table code which has padding of 50px???

.item1 {
    outline:1px solid blue;
    padding-top: 0px; 
    padding-right: 51px; 
    padding-bottom: 102px; 
    padding-left: 51px;
}

.item2 {
  outline:1px solid blue;
   padding-top: 0px; 
   padding-right: 51px; 
   padding-bottom: 102px; 
   padding-left: 51px;
}

.item3 {
  outline:1px solid blue;
   padding-top: 0px; 
   padding-right: 51px; 
   padding-bottom: 0px; 
   padding-left: 51px;
}

Don’t know about your math, but I see 6px of additional width right there.

The paddings, including the bottom paddings, should be the same, don’t you think?

89

I did that for this reason: How do I center this code in the middle of the page? - #59 by asasass

90

When you put it to 51 it measures at 50 right, 50 left.
Only on flexbot.

That’s exactly how the table measures. 50 / 50

91

When I put it like this: It doesn’t collapse. When I put it to 1200 it collapses. Can I fix that so it doesn’t when I have it set to 1200?

.container {
    width:1206px; 
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin:0 auto;
}
92

In other words, you did that because you wanted to. Not because there was a proper reason to do so.

Set the paddings in the flexbox code the same as those in the table and we’ll go from there.

93

Flexbot will be off by 1px then, compared to table.

94

I think you mean per item, nevertheless, one logical pixel is better than two stupid pixels per item. We just have to find that “logical” pixel.

95

On flexbot when I have padding set to 50px it measures at 49px. If I put it to 51px it measures at 50px.

96

yes, per item, right, left padding.

97

Update the code so the paddings match the table code and open a new deskthing.
If 50px measures 49px to you, it should measure 49px to me, too, and that is what I want to see… a rabbit I can chase. :rabbit2:

98

That previous fix must have done it.

<span class='item-line'/>

table
http://testblogty678.blogspot.com/

vs.

flexbot:
https://testblog567895.blogspot.com/

99

And now they’re both 1200

1 Like
100

Thank you for your help with this, couldn’t have done it without your help.

1 Like
101

We have a problem.