Hi, I'm new here and thank you for allowing me to be a part of this forum.
I'm struggling for 2 days to find out why this child div is going out of its parent div. I know it's because of margin, but I used margin many times and I never had this type of problem with CSS. I used box-sizing und overflow already, but it's not helping either.
Here is the code: https://jsfiddle.net/nj9594o9/
Any idea what I can change to keep margin inside the parent div?
Not tested
Not the margin, but the display property. Tables have certain requirements regarding size and containment. See html5 on tables. HTML5 is written for the guys who make browsers. HTML4.01, in this case is better written for the web developer.
Using css to set table properties does not affect the structure, so for example, the rows of zeros overflow which would not be allowed in a structural table. You could try the overflow property to scroll or cut off the inner div.
The base question is, what are you trying to do? There are likely more appropriate ways to skin this particular cat.
gary
gary.turner wrote:The base
The base question is, what are you trying to do? There are likely more appropriate ways to skin this particular cat.
I just want to push the table inside with a margin-right: 5px;
No, I mean what are you doing, not how you want it to look
Is your content a table? If so, mark it up as a table. If it's not a table, then why are you trying to display it as a table?
Consider that the content does not have proper markup.
Show us some typical content without regard with presentation. In other words, how would you mark it up if css did not exist?
g