How to inline block only parent elements and not also their children - website design system project

Hello,

I’m trying to get the parent elements to inline block like the example and have the children still be underneath each parent. However since the h3 elements are separated by the p elements it doesnt wrap around the whole border provided. it just lists each like an individual element. I’ve searched everywhere and the only help i can find is how to do inline block and not this specific situation.

 <!--fonts section-->
    <div class="sections">
        <h2>Fonts</h2>
            <h3 class="font-examples">Source Code Pro</h3>
                <p>The quick brown fox jumps over the lazy dog.</p>
                <p>The quick brown fox jumps over the lazy dog.</p>
                <p>The quick brown fox jumps over the lazy dog.</p>
            <h3 class="font-examples">Nunito Sans</h3>
                <p>The quick brown fox jumps over the lazy dog.</p>
                <p>The quick brown fox jumps over the lazy dog.</p>
                <p>The quick brown fox jumps over the lazy dog.</p>               
            <h3 class="font-examples">Poppins</h3>
                <p>The quick brown fox jumps over the lazy dog.</p>
                <p>The quick brown fox jumps over the lazy dog.</p>
                <p>The quick brown fox jumps over the lazy dog.</p>
    </div>

.font-examples {
    display: inline-block;
}

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-improved-styling-with-css/modules/wdcp-22-build-a-website-design-system/projects/independent-project-web-design-system

The H3 is a sibling, not a child of H2. Same can be said of all the P elements. They are all siblings at the same level. All indentation can be the same as the H2.

Give each segment a sectioning element as parent.

  <div>
    <h2>Fonts</h2>
    <section class="font-examples">
      <h3>Source Code Pro</h3>
      <p>The quick brown fox jumps over the lazy dog.</p>
      <p>The quick brown fox jumps over the lazy dog.</p>
      <p>The quick brown fox jumps over the lazy dog.</p>
    </section>
    <section class="font-examples">

    </section>
    <section class="font-examples">

    </section>
  </div>
div {
  width: 100%;
}
section {
  width: 33%;
  display: inline-block;
}

Thank you so much! it worked

1 Like

In a raw box model, allowing one per-cent for margins comes at a risk of breaking. Borders are outside of the content box as is the 2px gap between inline-blocks. If the width is 300px with three inline blocks width of 33%, allowing for the separation of the blocks, adds up to 303px, before borders, breaking the layout. This is a lower extreme, edge case. The cure is go with a percentage slightly less than 33. That is fudging.

This is worst case sleuthing. Generally speaking, at 33 per-cent, the inline blocks should have enough room to render on a single line. Be aware of the miniscule that may creep in and prepare the directives to address those edge cases.

I speak from a purely CSS perspective, pre Flexbox and Grids. It is because of the complexity of the above scenario that these additions to CSS were made. Going forward these implementations are going to be the norm. Be sure to step back into the pure CSS world and explore some of the limitations in order learn what those additions to the API really mean. History is cool. The code, maybe less so.

And this scenario is one of the best reasons for box-sizing: content-box. Put the border inside the content box and it will have no effect on the above scenario.

1 Like