When creating a product detail page in HTML, I encountered an issue where adding large text to one div caused the entire page layout to shift. Does anyone know why this is happening? Could it be due to the size of the div not being defined? See the issue here
[Initial state before adding large text]
html {
position: relative;
min-height: 100%;
min-width: 100%;
}
body {
margin-bottom: 60px;
}
a {
color: inherit;
text-decoration: none !important;
}
.small-paragraph2, .small-paragraph1{
margin: 0;
}
.container {
min-width: 90%;
margin: auto;
padding-left: 5px;
padding-right: 5px;
margin-top: 25px;
}
.product-image{
width:400px;
display:block;
height: 400px;
}
.details {
display:inline-block;
margin:0;
vertical-align:top;
}
.intro .text{
line-height: 0.8;
} <div class="container">
<div style="display:inline-block;" >
<img class="product-image" src="/images/ruach-1.png" style="display:inline-block;">
</div>
<div class="details">
<div class="intro">
<h3 class="text"><strong>Ruach 5781(AUDIO)</strong></h3>
<h4 class="text">New Jewish Tune</h4>
</div>
<h5>By <a asp-action="index" asp-controller="home">Various Artist</a> Produced by
<a asp-action="index" asp-controller="home"> Joel English</a></h5>
<h6>Item: 955016DA</h6>
<button class="pro-button"><strong>Print Songbook with Audio</strong><br />$19.95</button>
<button class="pro-button"><strong>PDF Songbook</strong><br />$19.95</button>
<button class="pro-button"><strong>Digital Album</strong><br />$19.95</button>
<span class="minus wrapper" style="color:grey;">-</span>
<span class="num wrapper" style="color:grey;">1</span>
<span class="plus wrapper" style="color:grey;">+</span>
<a asp-action="index" asp-controller="home" class="myButton" style="border: 0px;"><i class="fa-solid fa-bag-shopping"></i>Add to Cart</a>
<a asp-action="" asp-controller="" style="display:inline-block;" class="addtolist">Add to List <i class="fa-solid fa-caret-down"></i></a>
<p class="small-paragraph1"><strong>10% off </strong>distracted by the readable content ofs layout.</p>
<p class="small-paragraph2">is simply dummy text of the printing and typesetting . Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged.is simply dummy text of the printing and typesetting . Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged.
</p>
</div>