Putting two divs on the same row makes the first one start lower than it should be

Question

I am trying to have 2 divs on the same row, one with a title and a <hr> and the other one with an image that can be clicked to go to another page(even if I remove the link the problem persists). My expectations would be that executing this code I would get the first one starting in the top left corner followed on right by the image, but instead the first <div> just starts randomly.

#zonaTitlu {
  width: 300px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

#zonaImagine {
  width: 400px;
  height: 400px;
  display: inline-block;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}

<body style="background-color:LightGray">
  <div id="zonaTitlu">
    <p>
      <h3>Welcome to LOL Tournaments</h3>
    </p>
    <hr class="LinieTitlu">
  </div>
  <div id="zonaImagine">
    <a href="https://eune.leagueoflegends.com/ro/">
      <img class="logo" src="lol-logo.jpg" alt="LOL logo">
    </a>
  </div>
</body>

What do you mean by, "but instead the first
just starts randomly."? Doesn't look random to me... — MrRobboto, Oct 25 '19 at 20:03
https://imgur.com/a/jGwFy9u here you can see that it is a lot of blank space between the top and the start of the div on the left — Alin Catalin Preda, Oct 25 '19 at 20:06
body, html {padding: 0px; margin: 0px; } or use a proper reset.css — circusdei, Oct 25 '19 at 20:11
@circusdei that's not the issue. The OP is trying to essentially float the divs next to each other. And there is space above the second div when they are next to each other. — disinfor, Oct 25 '19 at 20:12
Note that your HTML is invalid. `
` elements can't contain `` elements — j08691, Oct 25 '19 at 20:13
@disinfor ah, k getting nothing for the hotlinked image on the right here... — circusdei, Oct 25 '19 at 20:20
@disinfor I think they have both issues. When OP says the div starts out randomly, that's the body margin issue. When they're expecting the image on the right, that would be floating but with display: inline-block you shouldn't need to float - it's the width screwing that part up I think. — MrRobboto, Oct 25 '19 at 20:41
@MrRobboto no, the margin isn't causing the main issue. If you look at what is output (when an image is actually linked correctly), the first div starts almost 100px down. https://jsfiddle.net/qbfr59kg/ — disinfor, Oct 25 '19 at 20:57
@disinfor Ah I see what you mean - it is not random still to be clear - once you put content in the div (the h3 and hr), it is aligning the content with the adjacent inline-block element at the default alignment baseline - so you see the hr aligns with the image div at the bottom. vertical-align: top fixes that - I don't totally understand why the content lines up like that instead of the parent div though, would be interesting to know... — MrRobboto, Oct 26 '19 at 15:22
@disinfor fyi I just edited my answer elaborating on this and providing a link explaining more... Basically, "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow" being the main explanation. — MrRobboto, Oct 26 '19 at 15:36
@MrRobboto yeah, I know it's not random :) Good job on updating your answer to explain why it's happening and offering the solution. — disinfor, Oct 26 '19 at 18:32

score 2 · Accepted Answer · answered Oct 25 '19 at 20:19

If you want both div side by side mean try this and change the image width to 100%

.zona{
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#zonaTitlu {
  width: 50%;
  height: 200px;
  display: inline-block;
  background-color: red;
}

#zonaImagine {
  width: 50%;
  height: 400px;
  display: inline-block;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}

<body style="background-color:LightGray">
<div class="zona">
  <div id="zonaTitlu">
      <h3>Welcome to LOL Tournaments</h3>
    <hr class="LinieTitlu">
  </div>
  <div id="zonaImagine">
    <a href="https://eune.leagueoflegends.com/ro/">
      <img class="logo" src="lol-logo.jpg" alt="LOL logo">
    </a>
  </div>
  </div>
</body>

@AlinCatalinPreda That's [Css Vendor](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) — itsMasoud, Oct 25 '19 at 20:33
@alincatalinpreda This link will help you css vendor code https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix — Fussionweb, Oct 25 '19 at 20:37

MrRobboto · Answer 2 · 2019-10-26T15:34:12.350

While I like the other solutions (flexbox especially). OP seems to have a simple problem to fix - inline-block alignment default to baseline (bottom) and the content within the first div is what's being aligned with the bottom of the image. You see the hr is lined up with the bottom of the image.

Adding vertical-align: top; on either inline-block element fixes this and they will align at the top. Here is a good SO post on all the above behavior: My inline-block elements are not lining up properly

I don't know what you're trying to do with fixed widths so I'm not going to offer other solutions with responsive design and whatnot - this is the straight answer to your question.

#zonaTitlu {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: red;
  vertical-align: top; // added this
}

#zonaImagine {
  width: 140px;
  height: 100px;
  display: inline-block;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}

<body style="background-color:LightGray">
  <div id="zonaTitlu">
    <p>
      <h3>Welcome to LOL Tournaments</h3>
    </p>
    <hr class="LinieTitlu">
  </div>
  <div id="zonaImagine">
    <a href="https://via.placeholder.com/350x150">
      <img class="logo" src="https://via.placeholder.com/140x100" alt="LOL logo">
    </a>
  </div>

score 1 · Answer 3 · answered Oct 25 '19 at 20:34

Now you can adjust all things separately. TH HR is a bit outdated. It also will force a line break. I add a underline to the h3 which would do same i thing. But for completeness i add also a HR which can now be placed also individual by css. Same for the image. - It depends a bit on the image size how to do adjustments.

            <!DOCTYPE html>
            <html>

                <head>
                    <title>Untitled</title>
                    <style>
                        #zonaTitlu {
                            width: 400px;
                            height: 200px;
                            display: inline-block;
                            background-color: red;
                            display: inline-block;
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            z-index: -1;
                        }

                        #zonaImagine {
                            width: 400px;
                            height: 400px;
                            display: inline-block;

                        }

                        .LinieTitlu {
                            display: block;
                            margin-top: 0.5em;
                            margin-bottom: 0.5em;
                            margin-left: auto;
                            margin-right: 50px;
                            border-style: inset;
                            border-width: 2px;
                            border-color: darkgrey;
                        }

                        .underlined {
                            text-decoration: underline;
                        }

                        .logo {
                            position: relative;
                            width: 400px;
                            height: auto;
                            top: 5px;

                        }

                        .spacer {
                            display: inline-block;
                            width: 30px;
                        }

                        .hr {
                            position: relative;
                            top: 60px;
                            width: 400px;
                            left: 0px"

                        }

                        .para {
                            position: relative;
                            width: 380px;
                            top: 15px;
                        }
                    </style>
                    <style type="text/css">
                        body.c1 {
                            background-color: LightGray
                        }
                    </style>
                </head>

                <body class="c1">
                    <h3 class="underlined">Welcome to LOL Tournaments <a class="logo" href="https://eune.leagueoflegends.com/ro/"><img class="logo" src="lol-logo.jpg" alt="LOL logo"></a></h3>
                    <div id="zonaTitlu">
                        <hr class="hr">
                    </div>
                    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu autem, si
                    tibi illa probabantur, cur non propriis verbis ea tenebas? Mihi enim satis est, ipsis non satis. <i>Eiuro,
                     inquit adridens, iniquum, hac quidem de re;</i> Duo Reges: constructio interrete.</p>
                </body>

            </html>

score 0 · Answer 4 · answered Oct 25 '19 at 20:22

0

Looks right to me . You can try using a table if required.The div can be removed

answered Oct 25 '19 at 20:22

lajit nambiar

21
1

score 0 · Answer 5 · answered Oct 25 '19 at 20:32

here is a working example using flex-box

<body style="background-color:LightGray">
    <div id="container">
        <div id="zonaTitlu" class="box">
            <p>
                <h3>Welcome to LOL Tournaments</h3>
            </p>
            <hr class="LinieTitlu">
        </div>
        <div id="zonaImagine" class="box">
            <a href="https://eune.leagueoflegends.com/ro/">
                <img class="logo" src="lol-logo.jpg" alt="LOL logo">
            </a>
        </div>
    </div>
</body>

<style>


/*
#zonaTitlu {
  width: 300px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

#zonaImagine {
  width: 400px;
  height: 400px;
  display: inline-block;
}
*/

#container {
    display: flex;
    flex-direction: row;
}

.box {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}

</style>

Putting two divs on the same row makes the first one start lower than it should be

5 Answers5