How do I add border and make the main header move to the middle?

MDN Learn
,
#1

I’d like to create three column layout like the Multicolumn test 3:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills

Here’s my first attempt. Not sure how to add the dotted line next to the main header and move header to the middle.

<div class="container">
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>

<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
<div class="box">
  <h2>I am a level 2 heading</h2>
  <div class="subhead">Lotus root water spinach fennel</div>
</div>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. </p>
  </div>

.container {
  column-count: 3;
  column-gap: 20px;
  column-width: 200px;
}
.box {
  column-span: all;
  
}

h2 {
 
}
.subhead{
  font-style: italic;
  margin-top: 0;
}
#2

Hello @Sho_Sho123

you doing great check this one https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule

hope that help and have a nice day :slight_smile:

#3

I thought I’d just jump in here — I think you were asking a question basically about how the dotted line is added and the header is moved to the middle? It is included in the example’s internal CSS, so it is not obvious how this is done.

In situations like this, the browser’s developer tools are very useful. For example, in this case, hover your mouse pointer over one of the dotted lines, right-click on it (or Ctrl-click on macOS) and select the “Inspect” option, and the dev tools will appear. You can use them to see exactly what CSS is applied to the element.

In this case, it is quite a clever solution. First, generated content has been used to create pseudo-elements before and after the <h2> itself, and dotted borders have been added to these pseudo-elements:

.box h2::after {
    content: "";
    border-bottom: 5px dotted #ccc;
}

.box h2::before {
    content: "";
    border-bottom: 5px dotted #ccc;
}

Then CSS Grid has been used to arrange the pseudo-elements and the text content across the page so the text appears in the center:

.box h2 {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: .5em;
    align-items: center;
}
1 Like
#4

If you hadnt pointed this out @chrisdavidmills I would not have picked it up. Also a great question @Sho_Sho123. I was just happy to use column-span on the .box class.

I have a followup question. How do you know what the space is between a rule and the paragraphs? Question 2 on multicol ask the reader to do the following “ensuring there is 10px of space between the edge of the rule and the column conten”. I cant figure out how to see this using the developer tools.

1 Like
#5

@Ran This is also a good question :wink:

So, it is hard to find out exactly what the gap is between the columns when there is no specific value set. In the case of multi-col, the browser tends to take whatever information you give it (whether it is just a specific column width or count, column rule size, or whatever), and takes a “best fit” approach to make the columns work in the space available as best they can. This means that the columns and gutters may not work out exactly as big as you specify.

You can specify a minimum column gap width using https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap

2 Likes
#6

Thanks for taking the time to explain this @Chris