Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,297,597
Community Members
 
Community Events
165
Community Groups

DIVs with the same height in one line?

Hi all,

I would like to create tiles on my Confluence home page as a starting point for the main topic areas. I have realised this with the following macros:

- Div
- clickable
- CSS stylesheet

The result looks like this:

2022-03-24_14h18_30.png

The problem now is that the height of the DIVs varies when the display width is reduced:

2022-03-24_14h19_31.png

In classic html and css I would solve the problem as follows.

CSS definition

.row {
display: flex; /* equal height of the children */
}

.col {
flex: 1; /* additionally, equal width */
padding:2em;
margin: 10px;
}

HTML

<div class="row">
<div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
<div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class="row">
<div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis.</div>
<div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Result tested on jsfiddle.

2022-03-24_14h41_19.png

I have tested this solution in Confluence. Unfortunately, it does not work. The DIVs are displayed one below the other and not side by side as expected and tested in jsfiddle.

Does anyone have an idea what the problem is?

Thank you.

Greetings Michael

1 answer

1 accepted

0 votes
Answer accepted

Oh my God. What a stupid mistake. Every now and then it makes sense to put problems aside and look at them again the next day. The solution I showed also works in Confluence. I had inserted a comment in the CSS stylesheet and forgotten to close the comment with */. Of course, the following CSS configuration was not taken into account.

Here is the solution for Confluence with using above css code:

Step 1: Create an area
Step 2: In this area one DIV per line with the class row
Step 3: In the row created in step 2, as many DIVs as desired as a cell, with the class col.

Result: All cells in a row have the same height, regardless of the content.

Translated with www.DeepL.com/Translator (free version)

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Confluence

An update on Confluence Cloud customer feedback – June 2022

Hi everyone, We’re always looking at how to improve Confluence and customer feedback plays an important role in making sure we're investing in the areas that will bring the most value to the most c...

74 views 0 0
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you