Menu
I've stumbled across an issue that I'm not entirely sure how to resolve.
I have a page with a number of divs, one of which contains a table but has a margin of 20px. I need this table to 'butt' against the right-hand side of another div, which I have accomplished by using a margin of -20px - works as I'd hoped. As this div (which covers the entire right-hand side of the page) is fluid, the table has a width of 100%.
Whilst the left-hand side of the table is where I want it, the right-hand side is now 20px short of everything else.
Is there a way I can keep the negative margin on the right, without it also moving the table 20px from the right? I've tried a few things without success. My table CSS is pasted below.
.pricetable {
width:100%;
margin-left: -20px;
padding: 5px;
}
858
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.
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
It is possible to give margins a negative value. This allows you to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it.
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box.
My solution was to wrap the table inside a div with the negative margin.
<div style="margin-right:-20px">
<table style="width:100%">
...
</table>
</div>
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
