Code snippets, tips, how-tos

Make an inner div full width in CSS

Home » Dev » Make an inner div full width in CSS

Make an inner div expand to the full-width of the page.

When a div is inside another div, adding width: 100% will only stretch it to the width of its container. To make the stretch to the full width of the page (or viewport), use this:

.stretch-full-width { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); /* setting left margin as 50% of parent div's margin moves this div to the middle of the page. Then pull it back by a width that is half of the page's entire width. */ }
Code language: CSS (css)




Leave a Reply

Your email address will not be published.