-1

Hello so I have two columns spanning across the page. I would like to add some padding so my text fits nicely in the middle of each column top,bottom,left,right . I tried to use wrappers and adjust the div width that the text is in but I must be doing something wrong. This is my first time experimenting with VH and VW. Earlier I got it to do kind of what I wanted but after refreshing a few time the right div column would drop down and times or stay in its place. Any help would be much appreciated. 

body{
background-color: rgb(0, 0, 0);

overflow-x: hidden;

}

*, html {
    margin: 0 !important;
    
}








.left{
    background-color: rgb(88, 12, 12);
    height:100vh;
    width:45vw;    
    font-size: 1em;
    color: rgb(160, 160, 160);
    float:right;

        }      
          



  .leftw{
    background-color: rgb(88, 12, 12);
    height:100vh;
    width:50vw;   
    font-size: 1em;
    color: rgb(160, 160, 160);
    float: left;

        }   
        
        
   



      
  .right{
    background-color: rgb(54, 0, 0);
    height:100vh;
    width:45vw;
    float: left;
    color: rgb(160, 160, 160);
        }      
      



        .rightw{
            background-color: rgb(54, 0, 0);
            height:100vh;
            width:50vw;
            z-index:2;
            float: right;
            color: rgb(160, 160, 160);
        
                }      
                



        
        @media only screen and (max-width: 700px) {
        
        }
      
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript" src="stickynav.js"></script>







    <div class="leftw">
    <div class="left">
      
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quia sunt soluta eaque ex nam iste aperiam. Omnis nesciunt eos magnam dolorem rem saepe dignissimos, distinctio autem maxime, earum aut?
</div></div>



<div class="rightw">   
<div class="right">
      
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus quibusdam ratione quisquam molestiae necessitatibus, magnam laboriosam consequuntur ipsam minima alias aliquid eaque animi asperiores libero minus consectetur, temporibus quia hic?
</div></div>


</body>
</html>
Blake Strib
  • 9
  • 2

1 Answers1

0

Try adding

display: flex;
align-items: center;

on your .left and .right classes.

You can then still use top and bottom padding to prevent the text from sticking to the top of the element on smaller screens.

I'd also use min-height: 100vh instead of height: 100vh so that everything still performs well on smaller (less high) screens.

Sander
  • 130
  • 1
  • 6
  • that centered all text to be in the center of the page. I would like the text centered on the top of the div with some padding. top left and right. - – Blake Strib Apr 17 '20 at 09:24
  • Okay so I added top center and fixed that but the text is still aligning to one side. I will mess with it some more. Thanks. – Blake Strib Apr 17 '20 at 09:27