0

I have 2 divs. In the div on the right has a text. This text has to to be allways in the middle of the screen. Also the text is never allowed to leave the box. I want it responsive. So it works on pc / tablet / phone, etc.

Here my jsfiddle: https://jsfiddle.net/ourn15f8/106/

.screen-1 {
  width: 500px;
  display: flex;
}

.div-1 {
  background-color: green;
  width: 100px;
}
.div-2 {
  background-color: red;
  width: 400px;
  text-align: center;
}
Total Width = Screen Width
<br><br>

Situation:
<div class="screen-1">
  <div class="div-1">logo</div>
  <div class="div-2">text</div>
</div>

Wanted:
<div class="screen-1">
  <div class="div-1" style="position: absolute">logo</div>
  <div class="div-2" style="width: 500px">text</div>
</div>
<div class="screen-1" style="width: 400px">
  <div class="div-1" style="position: absolute">logo</div>
  <div class="div-2" style="width: 300px">text</div>
</div>
<div class="screen-1" style="width: 300px">
  <div class="div-1" style="position: absolute">logo</div>
  <div class="div-2" style="width: 200px">text</div>
</div>
Text in the middle of screen
<br><br>
Also when screen to small, I want this:
<div class="screen-1" style="width: 150px">
  <div class="div-1">logo</div>
  <div class="div-2"  style="width: 50px">text</div>
</div>
 "text" is never allowed to leave the div

<br><br>
Info:<br> 
I dont want to use position absolute. The divs have to by dynamic so it works on pc and phone.
R. Richards
  • 24,603
  • 10
  • 64
  • 64
Unknown
  • 83
  • 1
  • 9

1 Answers1

1

You can use grid to make 3 boxes, each 1fr so they're evenly spaced then put your logo in the left one and the content in the middle one. You can then use flexbox to put the text div in to the middle of the centre div which is essentially the centre of the screen.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: red;
}

.logo {
  background-color: green;
  width: 200px;
  margin-left: 0;
  margin-right: auto;
}

.textcontainer {
  display: flex;
  justify-content: center;
}

.container>div>div {
  padding: 0.5rem 0.25rem;
}
<div class='container'>
  <div class='logocontainer'>
    <div class='logo'>
      Logo
    </div>
  </div>
  <div class='textcontainer'>
    <div>
      <!-- Put your text here -->
      Text
    </div>
  </div>
  <div></div>
  <!-- this is a dummy container to push the text container to the middle of the screen -->
</div>
Adam
  • 5,495
  • 2
  • 7
  • 24