0

I am building a site based on https://orange-ape.cloudvent.net/billing/expired-credit-card/

The relevant html/css from the page is:

<section class="sidebar sticky">
   <ul>
       <li>
          <a href="#item1" class="active">Top</a>
          <a href="#item2">Bottom</a>
       </li>
   </ul> 
</section>
<section class="tutorial-content">
   { content here }
</section>


.sidebar {
    display: none;
    padding: 0 20px 0 0;
    position: absolute;
    top: 85px;
    width: 200px;
}

.tutorial-content {
    width: 100%;
    margin-left: 230px;
}

Sometimes the sidebar does not have content - meaning the html looks like this:

<section class="sidebar sticky">
   <ul></ul>
</section>

When the sidebar does not have content, I want to center the "tutorial-content" in the middle of the page.

Is that doable in CSS alone?

dolphinkickme
  • 63
  • 8
  • 1
    this page is it generated using server-side programming language such as `PHP` ? Or is there a condition that makes the section empty ? – ths Aug 16 '18 at 20:25
  • 1
    No. To do that you'd need to have a parent selector, which CSS does not have. Essentially the process would be something like: `.sidebar ul:empty:parent + .tutorial-content`, but that's not possible. Could you not just add a different class to `.tutorial-content` in JS? – BenM Aug 16 '18 at 20:31
  • @ths, it is compiled by Jekyll, so there is a ruby script that checks to see if there are H2 subheadings, and if so, it creates the html to put in the menu. I could modify the script so the sidebar is not rendered to html when there are no H2 headings. – dolphinkickme Aug 16 '18 at 21:31
  • @BenM, I could also add a class based on if the content is present or not. – dolphinkickme Aug 16 '18 at 21:31

0 Answers0