1

when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.

https://i.stack.imgur.com/nVk9u.jpg

for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Blue</title>
</head>

<body>

    <aside class="side-menu"></aside>
    <main class="main-content">
        <div class="c-content">
            <div class="c-content-text">

            </div>

        </div>


        <div class="r-content">
            <div class="r-content-text">

            </div>
        </div>
        <div class="video-container"></div>
    </main>



</body>

</html>

CSS

html {
  font-family: Roboto, san serif;
  font-size: 16px;
  font-weight: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1 {
  font-size: 3.125rem;
  line-height: 3.6875rem;
  text-transform: uppercase;
  color: #ffffff;
}

p {
  font-size: 1rem;
  font-family: Roboto;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
}

body {
  background-color: #1458e4;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.side-menu {
  width: 5%;
  height: 100vh;
  /* background-color: coral; */
  position: sticky;
  display: inline-block;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.main-content {
  background-color: cyan;
  display: inline-block;
  width: 95%;
}

.c-content {
  background-color: rgb(184, 11, 184);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  width: 67%;
  height: 100vh;
}

.r-content {
  display: inline-block;
  background-color: darkkhaki;
  width: 33%;
  height: 100vh;
  padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}

.video-container {
  background-color: lemonchiffon;
  height: 68vh;
}

.c-content-text {
  display: inline-block;
  /* position: absolute; */
  background-color: tomato;
  width: 500px;
  height: 500px;
}

.r-content-text {
  background-color: turquoise;
  width: 500px;
  height: 500px;
}```
Evebev
  • 11
  • 2

1 Answers1

0

Remove display: inline-block in class c-content-text should also solved your issue.

I think this thread answer's your question Inline-block element height issue

AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.

Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.

huan feng
  • 7,307
  • 2
  • 32
  • 56
  • Thank you for the help. I tried to simplify the layout to understand how the inline block element is causing the shift https://jsfiddle.net/q2j9wtuv/ , why doesn't the inline- block element here causing the same issue ? – Evebev Nov 22 '20 at 03:09
  • I cannot give you a explaination right now, hope someone could give you a detail explaination, already vote up your question, BTW, i think it does some relation with the font-size you override the body to 0px; – huan feng Nov 22 '20 at 04:22