Stretch div to full width inside fixed width element

Question

I have a blog page, I am using col-md-8, Inside col-md-8 my content exists, But I wanna stretch one of my div to be stretch to full width which is in col-md-8. My page

I wanna make it stretch, My code:

.joinUs {
  width: 100vw;
  margin-left: -33.333333%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="article--publishedDate smallText text-uppercase">
          Published : 02 June 2019
        </div>
        <div class="article--topDescription mt-54px">
          In the above video, I have talked about top font management apps for Windows and Mac OS. Most of the Windows Font Management apps are Free and for Mac most of them are paid. I have talked about the top apps for Windows and Mac.
        </div>

        // I wanna make it stretch to full width of the browser
        <div class="joinUs">
          <div class="row">
            <div class="col-md-8">
              <div class="sectionTitle allCaps-Bold">
                <span>Start learning for FREE Today - Visual Design Class</span>
              </div>
            </div>
            <div class="col-md-4">
              <div class="joinUs--title">
                Join my community of <span>41257</span> students from <span>170</span> countries worldwide.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

But it doesn't work

Please help me, I am stuck

Does this answer your question? [CSS 100% height with padding/margin](https://stackoverflow.com/questions/485827/css-100-height-with-padding-margin) — Object object, Feb 21 '20 at 12:00
@TheGoldKnight23 what does 100% height have to do with strech div width? — Calvin Nunes, Feb 21 '20 at 12:01
Please, try to add a [mcve] or a link to a fiddle where we can reproduce and debug your code. Also, why `margin-left: -33.3%` ? — Calvin Nunes, Feb 21 '20 at 12:02
Does this answer your question? https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Feb 21 '20 at 12:07
http://ifislam.com/learnuxui/build/developing/article-video.html here is the link, please check and see, the section below video — Zain Shabir, Feb 21 '20 at 12:21

Kevin · Accepted Answer · 2020-02-21T12:51:12.070

1

Check this. Hope this helps. There is two way to achieve this,

negative-margin and VW-width
content in a fixed with container but let :before :after to achieve the fullwidth effect. ( The Blue One )

/*Container style is for illustration purpose only */

.container {
  background: gray;
  min-height: 400px;  margin-bottom: 100px;
}


/*Can achive using vw css unit*/
.row-full {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  height: 100px;
  margin-top: 100px;
  left: 50%;
}

/*<!--- 2nd way --> */

.content_box {
    padding: 54px 0 21px;
    color: #fff;
    background-color: #88bae1;
    margin-bottom: 145px;
    position: relative;
    z-index: -1;
}
 .content_box:before {
    content: "";
    position: absolute;
    height: 100%;
    left: -3000px;
    right: -3000px;
    background-color: #88bae1;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: auto !important;
}

<div class="container">
    
    <div class="row" style="height:100px; background: #fff;"> this is ok</div>
    <div class="row row-full" style="height:100px; background: #f00;">
        this should take 100% width
    </div>
</div>


<!--- 2nd way --> 


<div class="content_box">
<div>Lorem ipsum</div>
</div>

Solution of your problem

.joinUs:before {
    content: "";
    position: absolute;
    height: 100%;
    left: -3000px;
    right: -3000px;
    background-color: #ebf0f8;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: auto !important;
}

and body{overflow-x: hidden;}

edited Feb 21 '20 at 12:51

answered Feb 21 '20 at 12:04

Kevin

1,241
7
20

no bro, lemme live my website, so u can check it – Zain Shabir Feb 21 '20 at 12:14
Its Okay, But If u can reproduce your problem in the stack fiddle it will be good to debug it. – Kevin Feb 21 '20 at 12:15
i was trying to make stack fiddl nbut it doesnt support bootstrap styles etc tct, so it's not good, that's why i am uploading project to live – Zain Shabir Feb 21 '20 at 12:19
http://ifislam.com/learnuxui/build/developing/article-video.html here is the link, please check and see, the section below video – Zain Shabir Feb 21 '20 at 12:21
add the Css what i am updating in my answer – Kevin Feb 21 '20 at 12:49
okay brother..... – Zain Shabir Feb 21 '20 at 12:51
Updated.. Check Now – Kevin Feb 21 '20 at 12:51
@Kevin is using such a large amount of margins a good practice ? – Nikunj V Feb 21 '20 at 13:40
Definitely not, but lets consider this CSS as a hack for this situation. – Kevin Feb 24 '20 at 07:52

score 1 · Answer 2 · answered Feb 21 '20 at 12:51

after few hit and trial I found the solution:

.joinUs {
    width: calc(100vw - 50px);
    margin-left: -27%;
    padding: 20px 15px;
}

the problem with margin-left: -33.333333%; is that the percentage is based on the width of the container which in this case is your col-md-8, not the viewport. Also the child element row stretches the width by 30px because of margin-left: -15px; and margin-right: -15px; which could result in horizontal scrollbar on page. To avoid the scrollbar I added padding: 20px 15px; to compansate the negative margins by row.

Going through your website I found out that you are overriding Bootstrap's original classes. Never do that!

Instead Always create your own classes

Stretch div to full width inside fixed width element

2 Answers2