One challenge I'm facing is creating HTML/CSS code that automatically adjusts the website layout (blocks and content) when I resize the browser window. For example: I encounter text overflow issues in a block I've created when I minimize the browser window.
I want the block element to dynamically adjust its size based on the length of the content.
The Issue: The block element experiences text overflow, as indicated by a green block with a solid border style.
What I've Tried: I attempted to solve it with overflow: auto;, however, it's not the most elegant solution.
My Desired Outcome: I wish for the block to adapt itself according to the text length and vice versa
.p1 {
background-color: green;
border-style: solid;
float: left;
width: auto;
height: 100px;
}
.block {
display: block;
width: 180px;
}<header>
<h1>Title</h1>
<nav></nav>
</header>
<main>
<article class="p1">
<div class="block">
<h4>Paragraph I</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel...
</p>
</div>
</article>
</main>
<footer></footer>