Trying to Populate one more main section

HTML & CSS
1

In the above pen by Mr. @PaulOB I am trying to populate one more “Main” section. Something like this →

1327×444 9.69 KB

But the HTML is very subtle so I am miserably failing. I am looking forward to the possible suggestion to implement this change w/o making too many changes in CSS and HTML.

2

Paul’s code is not subtle. it’s simple and straightforward. It follows the known and documented rules of HTML and CSS all of which are found on-line.

Without clouding the issue with silly speculation, show us a working page with the code that you tried and explain why you chose the elements and CSS that you did to add the third main section. Using your thinking and code, we will then explain where you went wrong and how to make it right.

If you have difficulty explaining your thinking, please take a formal course in HTML and CSS from a reputable institution. You will learn basic terminology as you learn HTML element and CSS rule behaviors and how they work together. You could have done that at least 3 times during the past year and been at the forefront of the learning curve now.

Our reward for being here for members lies in the satisfaction that we feel when members become stronger by learning something new about HTML/CSS or problem solving. Independence.

3 Likes
3

I’m not sure what you mean by “miserably failing”. Judging by the image you posted it looks like you were successful.

Anyway, perhaps part of the difficulty you’re having is because you’re looking at too much at once?

If you look at Paul’s CodePen a section that closely resembles your image is that before the first horizontal rule.

Fortunately, Pauls code has the nested elements nicely indented which makes it easier to remove sibling elements below that first horizontal rule. After adding classes to the remaining H2 tags in the order in which they appear in the HTML there is this much less amount of HTML

<div class="wrap">
  <div class="main">
    <div class="content">
      <div class="inner-content">
        <h2 class="first_main">Main</h2>
        <p>Billions upon billions upon billions?</p>
      </div>
      <div class="inner-content main">

        <div class="content">
          <h2 class="second_main">Main</h2>
          <p>Billions upon billions upon billions?</p>
        </div>

        <div class="sidebar">
          <h2 class="first_sidebar">Sidebar</h2>
          <p>Lorem Ipsum.</p>
        </div>
      </div>
    </div>
    <div class="sidebar">
      <h2 class="second_sidebar">Sidebar</h2>
      <p>Lorem Ipsum.</p>
    </div>
  </div>
</div>

I can now add some CSS that will allow me to easily what is displaying where

h2.first_main::after { content: ' M1'; }
h2.second_main::after { content: ' M2'; }
h2.first_sidebar::after { content: ' S1'; }
h2.second_sidebar::after { content: ' S2'; }

I can see that I want a “copy” of the “M1” below “M2” and “S1” and “S2” to extend another row down. I’ll try adding that copy after the <div class="inner-content main"> group

        <div class="sidebar">
          <h2 class="first_sidebar">Sidebar</h2>
          <p>Lorem Ipsum.</p>
        </div>
      </div>
<!-- start new -->
      <div class="inner-content">
        <h2 class="new_main">Main</h2>
        <p>Billions upon billions upon billions?</p>
      </div>
    </div>
<!-- end new -->
    <div class="sidebar">
      <h2 class="second_sidebar">Sidebar</h2>
      <p>Lorem Ipsum.</p>
    </div>
  </div>

give the new H2 CSS similar to the others, and test to see how it looks

Well, on the one hand, not as good as I had hoped, but on the other hand Sidebar 2 has heightend without me needing to do anything, so that’s a plus. And I now have some confidence that the HTML is good enough to move on to fixing up the CSS issues.

3 Likes
4

Most of the code is in place but its a matter of selecting the right elements to use and then adjusting padding and borders.

You can add the extra html like this:

<div class="wrap wrap5">
  <div class="main">
    <div class="content">
      <div class="inner-content">
        <h2>Main</h2>
        <p>Billions upon billions upon billions?</p>
      </div>
      <div class="inner-content main main2">
        <div class="content">
          <h2>Main</h2>
          <p>Billions upon billions upon billions?</p>
        </div>
        <div class="sidebar">
          <h2>Sidebar</h2>
          <p>Lorem Ipsum.</p>
        </div>
      </div>
      <div class="inner-content main">
        <div class="content">
          <h2>Main</h2>
          <p>Billions upon billions upon billions?</p>
        </div>
      </div>
    </div>
    <div class="sidebar">
      <h2>Sidebar</h2>
      <p>Lorem Ipsum.</p>
    </div>
  </div>
</div>

I added an extra class (.main2) so that the padding and borders of the wrap can be negated. All the rest is using existing html and css.

.main2 {
	padding:0;
	border:none;
}

I’ve updated the codepen to show it in action.

4 Likes
5

I manipulated that Image with the help of MS Paint for the sake of posting for clear understanding.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.