am fetching articles from an api, most of them are paragraphs containing text, and one of them overflowed the container and went beyond it. I used max-width: 100%; on the container but it is not working, width of the p element is 100% but big empty space in that paragraph takes some words outside the container, I tried some things but nothing worked, I want something that is simillar to flex-wrap: wrap I guess? am not sure
see snaps here
I used this on the container:
.exact-article > div:first-child {
margin-top: 20px;
max-width: 100%;
}
and same on the p itself
.paragraphs p {
margin: 25px 0;
max-width: 100%;
}
so any idea how to wrap this big empty space?
Related
blockquote {
background-color: lightblue;
width: 410px;
height: 400px;
}
blockquote p {
float: ;
margin: 0;
padding: 0;
display: inline-block;
background-color: red;
}
blockquote img {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
<blockquote>
<img src="https://socialbrew.dk/wp-content/uploads/2020/06/171026-better-coffee-boost-se-329p_67dfb6820f7d3898b5486975903c2e51.fit-760w-1.jpg">
<p>I love to drink Coffee</p>
<p>Cofee is the nectar of life</p>
</blockquote>
In this example, the two p are not floating. They are now inline-block, and their normal doc. flow is to be aligned next to the img, but not at the top of the container, but at the bottom of the container. Now, if I shrink the width of the container to 400px, the second p will be pushed down to the second line, which starts from left and is beneath the image. So the second p gets arranged beneath the image on the second line.
If, however, I don't shrink the width, and instead, I float the two p, they will both get elevated to the top right corner of the container, and now, if i shrink the width of the container again to 400px, the second p appears to be pushed outside of the container, instead of getting pushed down to the second line, however, is it not possible that, when both "p" are floating at the top, their actual order position in the DOM is at the bottom of the container, so once the container is smaller, the second p is pushed below to the second line, which is beneath the image and exceeding the container, and since it's floating, it gets elevated to the right of the container.
The only issue with this is that, I'm not sure and don't know if that is how floating works. When both p are floating at the top right corner of the container, is their actual DOM flow order at the bottom of the container, and just giving the false impression that the entire container is empty, or is their order at the top of the container where they actually appear?
At the time you didn't set the width of p it automatically determined by the contents or text inside it and if you reduce the width of the container to 400px and reduce the text inside the p will continue to align inline the following is example
blockquote {
background-color: lightblue;
width: 400px;
height: 400px;
}
blockquote p {
margin: 0;
padding: 0;
float: ;
display: inline-block;
background-color: red;
}
blockquote img {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
<blockquote>
<img src="https://socialbrew.dk/wp-content/uploads/2020/06/171026-better-coffee-boost-se-329p_67dfb6820f7d3898b5486975903c2e51.fit-760w-1.jpg">
<p>I love to drink Coffee</p>
<p>Cofee is the nectar</p>
</blockquote>
as you can see the p remains on the same line though I set the width its container to 400px means that in your example the size of two p are more than the left size of width of the container.
Try to use developer tool(ctrl + shift + I if you're on chrome) in you browser to detect the style here is photo of the width of p even thought you didn't set it
as you can see the width of second p is 162.156px but you didn't set it means it is actually determined by the length of text.
The second which you were asking about an elevation of two p is because when you float content automatically it goes to the side you float it at the top and if you didn't float it it will leave the size which is equal to the height of img from the top but if you set the height of img to 0px the p will go to the top the following is example
blockquote {
background-color: lightblue;
width: 410px;
height: 400px;
}
blockquote p {
margin: 0;
padding: 0;
float: ;
display: inline-block;
background-color: red;
}
blockquote img {
margin: 0;
padding: 0;
width: 100px;
height: 0;
}
<blockquote>
<img src="https://socialbrew.dk/wp-content/uploads/2020/06/171026-better-coffee-boost-se-329p_67dfb6820f7d3898b5486975903c2e51.fit-760w-1.jpg">
<p>I love to drink Coffee</p>
<p>Cofee is the nectar of life</p>
</blockquote>
I like to think I'm pretty good with CSS, but this issue is driving me crazy.
I'm trying to get 3 columns to be 100% height. The first two columns are floated left, the third is not floated, just margined over. There is a wrapper around all 3 columns that clears the floats. The HTML/BODY tag have 100% height on them. As far as I know, if all parent containers have 100% height, it should work. The wrapper should be as tall as the tallest content block (third column), so the first two columns should be that tall too, using 100% height.
Problem is, the wrapper, and thus the body tag, have a height equal to that of the browser window. For some reason it won't read the middle columns content height. There is probably a super stupid simple explanation for this and I'm just missing it.
Don't want an overflow hack. Cannot do faux columns. I don't see why this can't work using the CSS spec for height.
If I put a pixel amount on the wrapper div, like a 2000px height, the first two columns fill the height just like I want them to. Why isn't this working??
HTML:
<body>
<div class="wrapper clearfix">
<section class="sidebar-news clearfix"></section>
<section class="black-bar-vertical"></section>
<section class="section-main-content event-detail"></section>
</div>
</body>
CSS:
html {
height: 100%;
}
body {
background-color: #333;
height: 100%;
* {
box-sizing: border-box;
}
}
.wrapper {
height: 100%;
position: relative;
margin: 0 auto;
}
.sidebar-news {
float: left;
width: 300px;
height: 100%;
min-height: 100%;
background-color: #site-color-yellow;
margin-right: -25px;
padding: 76px 40px 20px 20px;
}
.black-bar-vertical {
position: relative;
float: left;
width: 116px;
background: url("#{img-path}/black-bar-vertical.png") repeat-y top center;
min-height: 100%;
height: 100%;
text-align: center;
margin-right: -25px;
padding-top: 81px;
z-index: 50;
}
.section-main-content {
width: 580px;
background-color: #FFF;
padding-top: 55px;
padding-left: 10px;
margin-left: 360px;
}
SCREENSHOTS:
Top & Bottom of page
The height of the two columns in dev tools
EDIT:
Found this article, which is basically the same problem.
html body is smaller than its contents
If I change the height property to min-height on the body, the wrapper becomes the full height of the content, yay! But then the 100% heights on the first two columns don't work at all.
Like I originally thought... if 100% height is set on an element, it bubbles up the dom, and inherits the height of it's parent container. If that parent container has 100% height, it inherits the height of the parent's parent, etc. That works as expected. But when it hits the body tag, with 100% height, it's reading that as 100% height of the browser window. That's the default behavior, which doesn't make sense to me. If you take off the height on the body, it encompasses all content, but then the wrapper div looks up to the body for it's height definition and get's nothing because there is no height set on the body.
It's seeming like this specific scenario isn't really possible without using flexbox, table layout, javascript, or absolutely positioned elements.
Flexbox fo-sho!
.wrapper {
min-height: 100vh;
width: 100vw;
display: flex;
align-items: stretch;
}
.sidebar-news {
min-height: 100vh;
flex-grow: 1;
}
.black-bar-vertical {
min-height: 100vh;
flex-grow: 1;
}
.section-main-content {
min-height: 100vh;
flex-grow: 1;
}
Check this out for ref- Flexbox CSS Tricks
I've decided to do a combination of faux columns to get the first and third columns background colors, and then an absolute positioned second column that I can stretch full height using top: 0, bottom: 0.
If anyone can still solve this problem, I'd love to hear how it's done!
I'm generally new to responsive web design and am trying to make a video site template. When I make the wave graphic responsive in the div tag the width works perfectly. However the height leaves a gap between the image (as if the height isn't responding base don the width) and the div tag and showing the background color red of the 'wave1' div.
You can see it here on jsFiddle on any screen size.
Any idea how to fix this???
Here is my code:
<div id="wave1">
<img src="images/wave1.jpg" alt="wave 1">
</div><!--wave1-->
#wave1 {
background-color:#C31619;
width: 100%;
height: inherit;
padding: 0;
margin: 0;
}
#wave1 img {
width: 100%
}
The red line you are seeing is the space between tags being rendered as text, and therefore taking up the equivalent space of a single character in the document flow. Simply set the font-size on the container to 0, then to 1rem (the value of the front size of the root element) on the children
(Demo)
#wave1 {
background-color: #C31619;
width: 100%;
height: inherit;
padding: 0;
margin: 0;
font-size: 0;
}
#wave1 * {
font-size: 1rem;
}
I've played with this for a while now and literally cannot see a reason as to why this is happening.
Giving
#wave1 { margin-bottom:-4px; }
works, but is certainly not the best fix as the gap is not being caused by margin and may simply break again in future.
The gap between the red bottom of the wave div and the video is caused by the padding on your "outer" div. You have:
.outer {
padding-top: 1%;
...
}
To remove the gap, remove that padding.
https://jsfiddle.net/oxn6zLar/
The height: inherit line is not necessary.
try adding display: block to your img's css.
The default display value for HTML img tags is inline, meaning that the image is rendered inline with text, and is given a line-height value, which causes the blank space underneath the image to appear (due to difference between the image height and the line height).
Another workaround would be to set vertical-align: bottom on the img element so that the difference between the line-height and the image height will be on top of the image.
I've created the following demo to show my issue:
http://francisbaptiste.com/nov17/
Each div is 33.33% wide. Within the div is an image with 100% width. I want it to be a perfect grid of images, but the height of the div is always a little more than the height of the image.
Shouldn't the height of the div be set by the height of the image within it? So why is there that little bit of space at the bottom?
The gap is coming from the actual whitespace after the image tag. You can use this to fix it:
.card img {
display: block;
}
Fiddle
Or a more hacky solution:
.card {
font-size: 0;
}
Fiddle
I thinks the problem is the height of outer div, you cannot use auto since the browser may have some default action for the div and its inside content. Instead, I specify the percentage of height and solved the problem
.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}
Does that make sense to you?
This is my code: http://jsfiddle.net/3GPTy/4/
CSS:
.price {
display: inline-block;
width: 19%;
background-color: pink;
margin-right: 8%;
}
.last {
margin-right: 0%
}
.container {
width: 780px;
margin:0px auto;
}
* {
margin: 0px;
padding: 0px;
}
What I don't understand is, I have 4*19 + 3*8 which should equal 100% but still it doesn't fit on one line?
To elaborate further, here's a few ways of solving the problem:
Comment out the space
</div><!--
--><div>
Put the space in the tags
</div
><div>
Just shove it on one line
</div><div>
The last one especially, ideally you should be minifying your HTML - I do on-the-fly with PHP magic, and with that I can write readable HTML and not have spaces.
CSS
.price {
width: 19%;
background-color: pink;
margin-right: 8%;
float:left;
}
http://jsfiddle.net/3GPTy/10/
Its because of the how the browser treats fonts; between letters it puts a small sliver of whitespace to space the characters out correctly. Counterintuitively this idea is applied to all elements, so if you have two div's at 50% width they will not fit on the same line because the small white space added makes the total width greater than 100%.
To solve this add:
font-size: 0;
to the parent div. You can then set the desired font size in its children to remove the white spacing that would have otherwise been added
Here's more detail on the issue from this CSS Tricks article, as well as other soultions including floating the elements and using comments.