CODEWITHSUNDEEP
htmlcsslayout
Gary Collins
Gary Collins

Reputation: 19

Need last div full width

I am trying to create a layout with css. Nothing complicated but can't figure out the last bit.

I have two rows and need both to go full width.

Row 1 - Has a div that is centered and 70% wide with more content

Row 2 - Should go full width below row 1

For some reason Row 2 is seems to be inside of the 70% section in row 1.

I know it is something simple, just new to laying out CSS.

CodePen: https://codepen.io/gcollins/pen/eEMKqR

HTML:

<div id="pp-post-container-{post_id}" class="pp-post-container">
  <!-- Row 1 -->
  <div id="pp-post-main-{post_id}" class="pp-post-main">
    <div id="pp-post-content-{post_id}" class="pp-post-content">
      <div id="pp-post-video-{post_id}" class="pp-post-video"></div>
      <div id="pp-post-left-{post_id}" class="pp-post-left">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div id="pp-post-right-{post_id}" class="pp-post-right">
        <div></div>
        <div></div>
      </div>
    <div>
  </div>
  <!-- Row #2 -->    
  <div id="pp-post-testimonials-{post_id}" class="pp-post-testimonials"></div>
<div>

CSS:

.pp-post-container {
  background-color: yellow;
  overflow: hidden
}

.pp-post-main {
  margin: 0px;
  padding: 0px;
  height: 300px;
  background-color:#EAEAEA;
}

.pp-post-content {
  width: 70%;
  margin: auto;
  height: 300px;  
  background-color: red;   
}

.pp-post-video {
  background-color: #000;
  height: 100px;
}

.pp-post-left, .pp-post-right {
  background-color:pink;
  display: inline-block;
  margin: 0px;
  height: 100px;
  width: 49.8%;
}

.pp-post-testimonials {
  background-color: green;
  height: 100px;
}

Upvotes: 0

Views: 67

Answers (2)

Alex Macra
Alex Macra

Reputation: 177

One way would be to take out row two from the parent div "pp-post-container" Also, you have some unclosed divs.

</div>
  </div>

https://codepen.io/alexMacra/pen/YxajdP

Upvotes: 0

mjr_river
mjr_river

Reputation: 147

I think maybe you are missing a couple of closing </div> tags causing the <div>in question to inherit the CSS of its container. 

   <div id="pp-post-container-{post_id}" class="pp-post-container">
        <!-- Row 1 -->
        <div id="pp-post-main-{post_id}" class="pp-post-main">
          <div id="pp-post-content-{post_id}" class="pp-post-content">
            <div id="pp-post-video-{post_id}" class="pp-post-video"></div>
            <div id="pp-post-left-{post_id}" class="pp-post-left">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div id="pp-post-right-{post_id}" class="pp-post-right">
              <div></div>
              <div></div>
            </div>
          <div>
        </div>
          </div>
        </div>
    </div>
        <!-- Row #2 -->    
        <div id="pp-post-testimonials-{post_id}" class="pp-post-testimonials"></div>
      <div>

Upvotes: 1

Related Questions