Text is not there but it is taking space like margin overlapping-CodePudding

Text is not there but it is taking space like margin overlapping. When you will run the code you see that red one has 2 lines and green one has 6 lines thus it is taking space of 4 lines in its horizontal and other two line is overlapping with the red's line. How can I remove the extra white space of green ones

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice 04</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            background-color: black;
            height: 25px;
            color: white;
            
        }
        .nav ul li{
            display: inline-block;
            font-size: 20px;
            margin: 0px 50px;
        }
        .red{
            background-color: red;
            width: 50%;
            height: 90vh;
            display: inline-block;
            white-space: normal;
        }
        .green {
            background-color: green;
            width: 50%;
            height: 90vh; 
            display: inline-block;
        }
        footer{
            background-color: black;
            color: white;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div >
        <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
        </nav>
    </div>
    <div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi itaque placeat natus voluptatum in autem eaque vero deserunt dolore eius?</div><div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus porro ducimus autem vel eveniet, numquam voluptatem laborum saepe vero nisi. ral Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, quos! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem itaque quia ipsa voluptatem tempore quibusdam enim nihil totam quidem sunt provident, vero illo pariatur tempora perferendis minima eos maxime voluptatibus! Blanditiis facere nihil sed, repellendus expedita placeat est repellat deleniti at. Voluptates ad animi veniam commodi vel dolorum placeat molestiae.</div>
     <footer>
        Copyright &copy;:Razz Developers
    </footer>
</body>
</html>

CodePudding user response：

First place your contents inside a container and then set

display:flex;

In this way

.container {
    display: flex;
}

here is your full code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice 04</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            background-color: black;
            height: 25px;
            color: white;

        }

        .nav ul li {
            display: inline-block;
            font-size: 20px;
            margin: 0px 50px;
        }

        .container {
            display: flex;
        }

        .red {
            background-color: red;
            width: 50%;
            height: 90vh;
            display: inline-block;
            white-space: normal;
        }

        .green {
            background-color: green;
            width: 50%;
            height: 90vh;
            display: inline-block;
        }

        footer {
            background-color: black;
            color: white;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div >
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
    <div >
        <div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi itaque placeat natus
            voluptatum
            in autem eaque vero deserunt dolore eius?</div>
        <div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus porro ducimus autem vel
            eveniet, numquam voluptatem laborum saepe vero nisi. ral Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Illum, quos! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem itaque quia ipsa
            voluptatem
            tempore quibusdam enim nihil totam quidem sunt provident, vero illo pariatur tempora perferendis minima eos
            maxime voluptatibus! Blanditiis facere nihil sed, repellendus expedita placeat est repellat deleniti at.
            Voluptates ad animi veniam commodi vel dolorum placeat molestiae.</div>
    </div>

    <footer>
        Copyright &copy;:Razz Developers
    </footer>
</body>

</html>

CodePudding user response：

Use the 'table-cell' property instead of 'inline-block'.

.red{
    background-color: red;
    width: 50%;
    height: 90vh;
    display: table-cell;
    white-space: normal;
}
.green {
    background-color: green;
    width: 50%;
    height: 90vh; 
    display: table-cell;
}