Menu
I have two <div>s inside a parent <div>. Both the inner ones are styled with no padding, border or margin and as width:50%; display:inline-block;. The outer <div> also has no padding, etc. Firebug shows the outer <div> to be of 1240px width, and each inner one to be 620px. So why do they appear one below the other and not side-by-side? If i lower their width to 618px, it works. Huh?
957
To calculate the total width, you must add the padding, border and margin together. This is the default method.
The max-width property prevents the element from exceeding the width of its parent, so you can set a certain width to the table container class chat-messages and use max-width: 100%; in your table. Using max-width: 100%; in both means that they can both fill the whole screen. Save this answer.
Your rule above is essentially doing this: div { width:100%; margin:0 auto; } as 100% is its auto value.
No, element width does not include padding, margin, or border. The basic difference between padding and width is that in padding you define the space around the element and on the other hand in the width you define the space of the element.
display:inline-block is inconvenient in the way that it takes in consideration mark-up whitespace when drawing the elements, AFAIK. Try setting font-size:0 to the parent element if it doesn't have any other text, and set the desired font-size for the child elements.
P.S., first try eliminating white-space in the mark-up between the elements, to see if that corrects the issue.
140
answered Sep 30 '22 07:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
