I have 2 blocks sitting in a region called "headline".

Drupal 8 seems to add these 2 blocks , into an unnamed div and thus their display:flex CSS layout is cancelled (you can't scatter 2 container items if these are wrapped into one div).

  • Please see attached image to make sure you understand me.

I have no idea where this inspected div is coming from. I don't recall adding it myself. Only because it seems to be added by Drupal 8 itself, I publish this question here.

The problem can be seen live here.

A Drupal 8 themer might have an idea on why this is happening.

I might need to note that the twig markup also doesn't contain such div.

The regions' twig markup:

<div id="headline">
<div class="container">
{% if page.headline %}
     {{ page.headline }}
{% endif %}

The CSS code I used:

#headline . container {display: flex; flex-direction: column; align-items: center}

@media screen and (min-width: 1080px) {

#headline .container {display: flex; flex-direction: row; justify-content: space-between; align-content: flex-start; flex: 1; margin: 0 auto}


enter image description here


Checkout Twig Debug to see where the template is coming from.



It will wrap the template with HTML comments telling you where to find it relative to the website root.

Some of the <div> tags provide containers for applying attributes to for things like contextual links and quick edit, so be cognizant of that when removing them when they have {{ attributes }} printed in them. Those CSS class attributes and data attributes are only are filled when those modules are enabled.


It could be coming from region.html.twig:


{% if content %}
  <div{{ attributes }}>
    {{ content }}
{% endif %}

{% if content %}
  <div{{ attributes != '' }}>
    {{ content }}
{% endif %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy