Question 175598 in CSS Question posted in
Some basic documentation can be found here.

Why won’t divs stay apart regardless of screen width? #CSS

Both containers are inside the parent div slideshow. I want the divs to always stay apart no matter how narrow i make the window. I tried using margin but it just places each div in relation to the parent div, i also tried to use percentages for the positions of each div but i still didnt get it to work. Now i tried to use float left but now they are both on top of each other.

.SlideShow {
  height: 600px;
  width: 100%;
  position: absolute;
  top: 24vh;
  left: 0%;
  background-color: rgba(37, 33, 37, 0.8);
}

.ImageContainer {
  height: 500px;
  width: 500px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  float: left;
  background-color: orange;
}

.textContainer {
  position: absolute;
  color: white;
  width: 30%;
  height: 10%;
  top: 50%;
  transform: translate(0, -50%);
  background-color: red;
  float: left;
}
<!doctype html>
<html>

<head>
  <title>
    Hubble Telescope
  </title>
  <link href="Space.css" rel="stylesheet" />
  <script src="Space.js">
  </script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body onload="">
  <div class="SlideShow">
    <div class="ImageContainer" id="ImageContainer" onclick="pause()"></div>
    <div class="textContainer">
      <div class="centertext" id="textContainer"></div>
    </div>
  </div>
</body>

</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Flexy boxy go crazy yao wow pow man


  2. 0

    Try using flex box. and you can use gap property of flex box to make the div’s stay apart. you can also use justify-content and give it the value space-between. Try this code

     .SlideShow{
    height: 600px;
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    top: 24vh;
    left: 0%;
    background-color: rgba(37, 33, 37, 0.8);
}

.ImageContainer{
    height: 500px; 
    width: 500px;  
    background-color: orange;
}

.textContainer{
    color: white;
    width: 30%;    
    height: 10%;
    background-color: red;
}

    I hope this is what you are looking for. But I don’t know why you used transform can you please explain

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search