Issue
Hello everyone and thanks Adam for editing
I'm new (noob) into coding and related to that, in this forum.
My Problem is i want create code in html/css which adjust automatically the website(blocks+content) whenever i minimize the browser window.
e.g. ive got the problem of text overflow in the block which i created, when i minimize the browserwindow.
I want the block element to adjust to the lenght of my content (here the text ).
Code below.
Best regards and sorry if I'm not that clear with what I want, but English is not my native language and I hope to get better in this by time as well nima
Problem There is a Textoverflow in the blockelemnt, which i marked as a green block with a solid borderstyle.
I tried Sure I can solve it with overflow: auto; but it's an ugly solution.
I want The block to adjust itself to the length of the text 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, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</p>
</div>
</article>
</main>
<footer></footer>
Solution
I'm not 100% sure if you want the width of the green block to fit the browser window or the height but... Block level elements like <article>
or <div>
will occupy the full screen width and automatically adjust their height to the content so the easiest thing to do is just don't define those properties in your CSS
Marked up changes are below. If it's not exactly what you're looking to achieve let me know in the comments and I'll tweak.
Good luck on your journey into CSS
.p1 {
background-color: green;
border-style: solid;
/* float: left; <--- if you're looking to make this block fit the width of the chile elements then it's better to use width: fit-content; */
width: fit-content;
/* width: auto; <--- you don't need this because the default is 'auto' */
/* height: 100px; <-- take this out and the height of your block will be set to the height of the content */
}
.block {
/* display: block; <--- you don't need this as a div is, by default, a block element */
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, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</p>
</div>
</article>
</main>
<footer></footer>
Answered By - Adam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.