How to place list items that are overlapping next to each other?

Question

I am creating a schedule page were you can view a set schedule, the only problem now is when multiple list items are overlapping each others, i.e starting before item before is ending, you will see in my example:

.day_div ul {
    width: 100%;
    position: relative;
}

.day_div li,
#info_holder li {
    position: relative;
    /* background-color: red; */
    color: white;
    transition: transform .2s ease-in-out;
    cursor: pointer;
    transform: scale(1) rotate(0deg);

    border-radius: 5px;
}

.day_div li::after,
#info_holder li::after {
    content: '';
    position: absolute;
    /* z-index: -1; */
    width: 100%;
    height: 100%;
    opacity: 1;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    /* opacity: 0;
      transition: opacity 0.2s ease-in-out; */
}

.day_div li.no-after::after,
#info_holder li.no-after::after {
    display: none;
    width: 0;
    height: 0;
}

.day_div li::before {
    border-radius: 5px;
}

.day_div li:hover.rotatable {
    /* transform: scale(0.9) rotate(6deg); */
    transform: rotate(6deg);
}


/* .day_div li:hover::after {
      opacity: 1;
    } */

/* skipping 1st child as it is the timeline */
.day_div li {
    background: rgb(60, 225, 226);
    background: linear-gradient(315deg, rgba(60, 225, 226, 1) 0%, rgba(28, 55, 172, 1) 100%);
}

.day_div:nth-child(3) li,
#info_holder li.three {
    background: rgb(60, 226, 124);
    background: linear-gradient(340deg, rgba(60, 226, 124, 1) 0%, rgba(88, 124, 147, 1) 100%);
}

.day_div:nth-child(4) li,
#info_holder li.four {
    background: rgb(122, 168, 91);
    background: linear-gradient(0deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(5) li,
#info_holder li.five {
    background: rgb(246, 176, 101);
    background: linear-gradient(20deg, rgba(246, 176, 101, 1) 0%, rgba(246, 127, 101, 1) 100%);
}

.day_div:nth-child(6) li,
#info_holder li.six {
    background: rgb(156, 87, 151);
    background: linear-gradient(25deg, rgba(156, 87, 151, 1) 0%, rgba(67, 51, 82, 1) 100%);
}

.day_div:nth-child(7) li,
#info_holder li.seben {
    background: rgb(122, 168, 91);
    background: linear-gradient(30deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(8) li,
#info_holder li.eight {
    background: rgb(60, 226, 124);
    background: linear-gradient(35deg, rgba(60, 226, 124, 1) 0%, rgba(88, 124, 147, 1) 100%);
}

.day_div li a,
#info_holder li a {
    top: 0;
    left: 0;
    position: absolute;
    /* width: 100%;
      height: 100%; */
    padding: calc(0.75* 1.25em);
}

.day_div li div,
#info_holder li div {
    display: block;
    position: absolute;
    padding: calc(0.75*1rem);
    overflow: scroll;
    height: 60%;
}

.day_div li a em,
#info_holder li a em {
    font-size: calc(var(--main-text-size)*0.8);
}

.day_div li.content_cutoff a::before,
#info_holder li.content_cutoff a::before {
    display: inline-block;
}

.day_div li a::before,
#info_holder li a::before {
    content: attr(data-start) " - "attr(data-end);
    display: block;
    color: #f1f1f1;
    font-weight: bold;
    font-size: calc(var(--main-text-size)*0.9);
}

.day_div li a.databefore::before,
#info_holder li a.databefore::before {
    content: attr(data-before);
}

.day_div li a em,
#info_holder li a em {
    font-size: calc(var(--main-text-size)*1.2);
}

.day_div:not(:first-child):not(:nth-child(2)) {
    border-left: none;
}

.day_div:last-child {
    border-right: none;
}

.day_div {
    /* may change to be a 5th of parent */
    border: 1px solid #ebebeb;
    width: 16%;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.day_div span {
    /* this is the day text styling */
    position: absolute;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ebebeb;
}


    
    Måndag
    
        MatteGöranKatedralenJa
            
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
        SpanskaLisa & AndyKatedralenNej
            
            
        
        TyskaMackanAkvarietNej
            
            Presens som vanligt, glöm inte digilär
        
        FranskaEsmagrupprummetNej
            
            
        
        LunchNej
            
            
        
        MentorstidPatrikKatedralenNej
            
            Ta med datorer och inlämmningslapp

As you can see for 'spanska', 'tyska', 'franska' and 'lunch' are in some way overlapping each others. I want to achieve this:

Here is the code in jsfiddle

EDIT 1:

As this code above is just a part of the entire page that I am working on, I couldn't get everything in. Here is a screenshot from the page showing why the list elements need to have a fixed y position: to match the timeline on the left.

Answers could be only css, javascript or both, doesn't matter for me.

Thanks!

user_5290177 · Answer

I don't fully understand your question, but the reason you're experiencing vertical overlap is the position: relative; on the

for these items (ie. removing this will properly stack them, but it may be there for another purpose I'm not aware of). Secondly, you're not stacking horizontally because your

that has a width of 16% on it.

I would give the

the full width of space you want your content to use, give the

.

user_9646048 · Answer

The only solution now was to add javascript that checks which elements that were overlapping and how many each element was overlapping. If an element was overlapping 4 other elements, it would be 1/4 of the width of the ul. Then I loop through again and check if each element is overlapping and then move that element to the left if that is true. If not, check next element.

This will first reduce the width of each element to make them fit, then move each element to the left if it is overlapping so it doesn't overlap the other elements.

When all this is done I let each element grow on the width as long as it doesn't overlap any elements so that no empty space is showing.

How to place list items that are overlapping next to each other?

2 Answers