Menu
I have a DIV (that is set to float:left) that has its width set to auto because i want it to be just as wide as its contents.
On hover, i would like to increase width of the DIV by say, 20 pixels.
When setting a fixed width in the :hover CSS class, the container will get that width on hover, but
How - without the usage of javascript - can i keep the content of the DIV adjusted to its content, and have it increase that width by a certain amount of pixels on hover?
See my JSFiddle here.
382
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.
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border. So, next time you find yourself setting the width of a block level element to 100% to make it occupy all available width, consider if what you really want is setting it to auto.
For me the easiest way to do this was to increase the content by a percentage higher than 100%. E.g.:
width: 110%;
But if you want to increase the size in n pixels as asked, you can use
width: calc(100% + 50px);
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
