I am trying to use CSS style display: inline-block; with 2 <div> but they are not displaying right next to each other

user_10799730 0
Viewed 48

Below is my HTML and CSS snippet.

 <!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">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       .box1{
           background-color: seagreen;
           display: inline-block;
           margin: 5px;
           padding: 4px;
           width: 433px;
           height: 233px;
           border: 2px solid black;
           
       }
       .box2{
            background-color: sienna;
            display: inline-block;
            margin: 5px;
            padding: 5px;
            width: 433px;
            height: 233px;
            border: 2px solid black;
       }
    </style>
    <title>Asspend21</title>
</head>
<body>
    <div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, molestiae cupiditate voluptatibus recusandae quibusdam ad, iure ratione consequuntur magni doloremque vel nemo eius magnam placeat saepe aspernatur ex? Molestias itaque ex voluptatem sit, minima incidunt nulla facilis dolores accusant!</div>
    <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem harum laudantium sapiente quos eos nam officiis et laborum fuga minus dolore vitae error quia corporis amet, labore temporibus ex soluta quod laboriosam beatae optio maiores, eum illum. Voluptatibus, hic aperiam eaque quam obcaecati nemo minima tempore dolorem similique impedit, harum magni quis ducimus veritatis id saepe</div>
</body>
</html>

It's coming like this. Image01

Even after removing padding and margin, It's still displaying the same. What is required to resolve the issue ? What is the issue here?

css html
3 Answers

Add float: left to .box1 to align them again :).

user_141663980

You can nest your divs in a wrapper and use flex-box to align your two divs. See the changes I made to your HTML and CSS in the below snippet. Using flex-box instead of margins or float's will give you much more control over the positioning of your divs.

*{
            margin: 0;
            padding: 0;
        }
       .box1{
           background-color: seagreen;
           display: inline-block;
           margin: 5px;
           padding: 5px;
           width: 433px;
           height: 233px;
           border: 2px solid black;
           
       }
       .box2{
            background-color: sienna;
            display: inline-block;
            margin: 5px;
            padding: 5px;
            width: 433px;
            height: 233px;
            border: 2px solid black;
       }
       
       .wrapper {
         display: flex;
       }
<!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>Asspend21</title>
</head>
<body>
<div class="wrapper">
    <div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, molestiae cupiditate voluptatibus recusandae quibusdam ad, iure ratione consequuntur magni doloremque vel nemo eius magnam placeat saepe aspernatur ex? Molestias itaque ex voluptatem sit, minima incidunt nulla facilis dolores accusant!</div>
    <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem harum laudantium sapiente quos eos nam officiis et laborum fuga minus dolore vitae error quia corporis amet, labore temporibus ex soluta quod laboriosam beatae optio maiores, eum illum. Voluptatibus, hic aperiam eaque quam obcaecati nemo minima tempore dolorem similique impedit, harum magni quis ducimus veritatis id saepe</div>
</div>
</body>
</html>

user_164963570

The root problem is that your div has the wrong vertical alignment. Just set vertical-align: top; to the divs that need to be positioned and the problem is solved.

You can find a good explanation here: H2 inside div inline-block weird offset

 <!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">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       .box1{
           background-color: seagreen;
           display: inline-block;
           margin: 5px;
           padding: 4px;
           width: 433px;
           height: 233px;
           border: 2px solid black;
           vertical-align: top;
       }
       .box2{
            background-color: sienna;
            display: inline-block;
            margin: 5px;
            padding: 5px;
            width: 433px;
            height: 233px;
            border: 2px solid black;
            vertical-align: top;
       }
    </style>
    <title>Asspend21</title>
</head>
<body>
    <div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, molestiae cupiditate voluptatibus recusandae quibusdam ad, iure ratione consequuntur magni doloremque vel nemo eius magnam placeat saepe aspernatur ex? Molestias itaque ex voluptatem sit, minima incidunt nulla facilis dolores accusant!</div>
    <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem harum laudantium sapiente quos eos nam officiis et laborum fuga minus dolore vitae error quia corporis amet, labore temporibus ex soluta quod laboriosam beatae optio maiores, eum illum. Voluptatibus, hic aperiam eaque quam obcaecati nemo minima tempore dolorem similique impedit, harum magni quis ducimus veritatis id saepe</div>
</body>
</html>

user_140329110
Related