CODEWITHSUNDEEP
htmlcss
Alin Catalin Preda
Alin Catalin Preda

Reputation: 141

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

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>

Upvotes: 0

Views: 74

Answers (5)

MrRobboto
MrRobboto

Reputation: 752

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>

Upvotes: 2

Thomas Ludewig
Thomas Ludewig

Reputation: 725

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>

Upvotes: 1

sao
sao

Reputation: 1821

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>

Upvotes: 0

lajit nambiar
lajit nambiar

Reputation: 21

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

Upvotes: 0

Fussionweb
Fussionweb

Reputation: 280

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>

Upvotes: 2

Related Questions