Search code examples
htmlcsswidthparent-child

How to increase width of child element beyond parent element

I am trying to get something like this blog which has:

But what I get is

(I am not trying to copy him, obviously I will change the image, etc.)

The borders are getting cut, because the width of the parent container (sidebar) is less than the width of the image. I google a lot, but all I found is overflow:visible, which somehow is still not working. Here is the output.

Solution

  • In two easy steps :

    1. Remove overflow: hidden; from .sidebar .widget.
    2. Add negative margin on the both sides of .sidebar h2 to make up for the width difference.