W3 Mind Logo
Home » Full width DIV inside container

Full width DIV inside container

				
					<div class="container">
    <div class="my-wrapper">         
        <div class="my-container">Your content goes here...</div>
    </div>
</div>
				
			
				
					html {
    width: 100%;
    height: 100%;
}

.container {
    width: 300px;
    background-color: red;
    margin: 0 auto;
    height: 1000px;
    position: relative;
    padding-top: 100px;
}

.my-wrapper {
    position: relative;
}

.my-container {
    height: 300px;
    background-color: #0f0;
    width: 100vw;
    margin-left: calc(-50vw + 50% - 8px);
    position: relative;
}
				
			
About Author
Picture of W3Mind

W3Mind

W3Mind focuses on Blogging, Make Money Online, SEO, Business Blogging, Social Media, WordPress, Internet Tools, Web Design and Development.
Give it a Share
Facebook
Twitter
LinkedIn
You May Also Like
How to
START A
BLOG
(step by step)
Load WordPress Sites in as fast as 37ms!