CODEWITHSUNDEEP
htmlcss
sword1st
sword1st

Reputation: 555

Centered Horizontally 2 Divs | One Under Other

I'm trying to make 2 divs centered horizontally and one under the other. Actually i did it with some trial and error but i couldn't make it resolution independent. It's looking weird with other resolutions except 1920*1080. I tried percantage but i couldn't make it. My div jumped to the left top corner. Here how my divs look like in 1920*1080 :

It should look like this in all resolutions

I know i shouldn't use this position,width and height pixels but i couldn't get this view without them. So i made it for clarity for my problem.

Here my html codes :

    <body>
      <div name="video-div" id="videodiv" style="position:absolute; left:320px; top:10px;">
        <video id="videoPlayer" controls>
          <source src="" type="video/mp4">
        </video>
      </div>
      <div id="info-div" style="position:absolute; left:320px; top:740px;">
      </div>
      <div name="test2" id="div2">
        <ul id="ultimes">
          <li>test</li>
        </ul>
      </div>
      <div name='test' id="div1">
        <input id="datepicker" type="text" placeholder="Tarihi Seç">
        <form id="form">
          <button type="submit" id="listele">Listele</button>
        </form>
        <ul id="list1">
          <li>test</li>
        </ul>
        <ul id="ullogs">
          <li>test</li>
        </ul>
      </div>
    </body>

Here my css codes : 

    #info-div{
      background-color:white;
      border:1px solid black;
      height:200px;
      width:1280px;
    }

    #videodiv{
      width: 1280px;
      height: 720px;
      background-color: red;

      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      /*margin: auto;*/
    }

    #videoPlayer {
      object-fit: fill; /* it's not filling the div */
    }
    #div1 {
        padding-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
        width: 25vh;
        height: 100vh;
        background-color: #d5f4e6;
    }

    #div2 {
        float: right;
        padding-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
        width: 25vh;
        height: 100vh;
        background-color: #d5f4e6;
    }
    body{
      margin:0px;
      padding:0px;
      background-color: #80ced6 !important;
      overflow: hidden;
    }

    #form {
      margin-bottom: 40px;
    }

Upvotes: 0

Views: 32

Answers (1)

Suresh
Suresh

Reputation: 427

If I get this correct. All you want to do is center two divs horizontally one under another (the video and the info div) with the video-div filling 100% width.

Have you tried wrapping them in another div and centering that horizontally? Doing this and giving the wrapper-div a width should work.

 .wrapper-div {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1280px
    }
.video-div {
      width: 100%;
}

<div class="wrapper-div">
  <div name="video-div" id="videodiv">
    <video id="videoPlayer" controls>
          <source src="" type="video/mp4">
        </video>
  </div>
  <div id="info-div">
  </div>
</div>

Upvotes: 1

Related Questions