3 DIVS can't be placed next to each other-CodePudding

I searched and found multiple threads on this subject and yet, I couldn't figure this one out.

Idea: All I want is to put 3 containers next to each other, in which each container vertically scrolls images by itself.

The CSS animation is working, here is the CSS code below:

#scroll-container {
    height: 600px;
    width: 600px;
    overflow: hidden;
    display: inline-block;
  }
  
#scroll-container img {
    max-width: 100%;
    max-height: 100%;
}

#scroll-text-1 {
    height: 100%;
    transform: translateY(100%);
    animation: my-animation-1 60s linear infinite;
  }

#scroll-text-2 {
    height: 100%;
    transform: translateY(-100%);
    animation: my-animation-2 60s linear infinite;
}
  
  @keyframes my-animation-1 {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(-550%);
    }
  }

  @keyframes my-animation-2 {
    from {
      transform: translateY(-550%);
    }
    to {
      transform: translateY(100%);
    }
  }

my-animation-1 scrolls from bottom to top and my-animation-2 scrolls from top to bottom. However, when I write HTML code such as below (in this case I'll use plain text instead of images):

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="../css/article.css">
        <title>Artikelliste Page</title>
    </head>

    <body>
        <div id="scroll-container">
            <div id="scroll-text-1">
                <!--Insert images here-->
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            <div>
        </div>
        <div id="scroll-container">
            <div id="scroll-text-2">
                <!--Insert images here-->
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            <div>
        </div>
        <div id="scroll-container">
            <div id="scroll-text-1">
                <!--Insert images here-->
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            <div>
        </div>
    </body>
</html>

The divs are not aligned next to each other, in fact they are not aligned at all. You cannot see other 2 containers below or next to each other. The first container appears, but the other 2 just don't exist on the page.

As of my troubleshooting, I opened the developer tools to actually hide the first container, because I thought they all overwrite each other, but no. When I hide the first container, the whole page becomes empty. You can still see the code in dev console, but nothing appears on the page.

My other attempts that came to nothing were:

1. float: left;

2. display: inline-block;

3. make a wrapper around those containers and either float: left; or display: inline-block;

I came to realization, that all of these 3 options would work IF all of the 3 containers actually appeared on the page. So this might be whole different topic, which either way I don't understand.

EDIT: I just tried to spam br tags below those 3 containers and it does nothing... as if the code gets abducted by a container...

CodePudding user response：

your html is was invalid

instead of having three #scroll-container i kept only one making it the parent div of #scroll-text-1 #scroll-text-2 #scroll-text-3 then adding

display:flex align-items:center; justify-content:space-around; to the #scroll-container to make all the children align side by side.i also kept only one animation for sake of the answer.

#scroll-container {
    height: 600px;
    width: 600px;
    overflow: hidden;
    display: flex;
    align-items:center;
    justify-content:space-around;
  }
  
#scroll-container img {
    max-width: 100%;
    max-height: 100%;
}
#scroll-text-1 {
    height: 100%;
    transform: translateY(100%);
    animation: my-animation-1 10s linear infinite;
  }

#scroll-text-2 {
    height: 100%;
    transform: translateY(-100%);
    animation: my-animation-1 10s linear infinite;
}
#scroll-text-3 {
    height: 100%;
    transform: translateY(-100%);
    animation: my-animation-1 10s linear infinite;
}
  
  @keyframes my-animation-1 {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(-550%);
    }
  }

<div id="scroll-container">
        <div id="scroll-text-1">
            <!--Insert images here-->
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text
        </div>
        <div id="scroll-text-2">
            <!--Insert images here-->
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text
        </div>
        <div id="scroll-text-3">
            <!--Insert images here-->
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text
        </div>
    </div>

CodePudding user response：

There was a few broken closing </div>s in your code, and you should have unique ID's on the page. This works but the animation for the 2nd column does take quite a while to populate

#scroll-container {
    height: 600px;
    width: 33%;
    overflow: hidden;
    display: inline-block;
    float: left;
}
#scroll-container-2{
    height: 600px;
    width: 33%;
    overflow: hidden;
    display: inline-block;
    float: left;
}
#scroll-container-3 {
    height: 600px;
    width: 33%;
    overflow: hidden;
    display: inline-block;
    float: left;
}

#scroll-text-1 {
    height: 100%;
    transform: translateY(100%);
    animation: my-animation-1 60s linear infinite;
  }

#scroll-text-2 {
    height: 100%;
    transform: translateY(-100%);
    animation: my-animation-2 60s linear infinite;
}
  
  @keyframes my-animation-1 {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(-550%);
    }
  }

  @keyframes my-animation-2 {
    from {
      transform: translateY(-550%);
    }
    to {
      transform: translateY(100%);
    }
  }

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="../css/article.css">
        <title>Artikelliste Page</title>
    </head>

    <body>
        <div id="scroll-container">
            <div id="scroll-text-1">
                <!--Insert images here-->
                Text1<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            </div>
        </div>
        <div id="scroll-container-2">
            <div id="scroll-text-2">
                <!--Insert images here-->
                Text2<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            </div>
        </div>
        <div id="scroll-container-3">
            <div id="scroll-text-1">
                <!--Insert images here-->
                Text3<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            </div>
        </div>
    </body>
</html>

CodePudding user response：

It was just an unclosed tag <div> all along... However, I really wanna keep my job and I'll seriously consider other options here that are cleaner and better. Massive L and a rookie mistake, but I thank everyone for their time.

CodePudding user response：

You can use flexbox to achieve this layout easily:

body {
  margin: 0;
}

#wrap {
  background: goldenrod;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-flow: row wrap;
}

.scroll-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(90%, 100px);
  margin: 10px;
  padding: 10px;
  background: white;
}

.scroll-container__item {
  height: 30px;
  width: 90%;
  background: darkorchid;
  margin: 5px 0;
}

<div id="wrap">
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</div>