CODEWITHSUNDEEP
htmlcssmarginsadjustmentborder-spacing
Blake Strib
Blake Strib

Reputation: 9

How do I add padding on two DIVS using VH and VW that fill up the screen?

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>

Upvotes: -1

Views: 1076

Answers (1)

Sander
Sander

Reputation: 128

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.

Upvotes: 0

Related Questions