Maybe it’s something obvious but I’m in need of some help finding out why the div containing the text next to the image here becomes taller than the image. Thanks to anybody willing to help.
As a text container decreases in width, lines of text become shorter and words wrap to new lines, creating more lines and therefore a taller box to contain more lines.
Adversely an image should maintain an aspect ratio, so as it decreases in width the height decreases in proportion.
Tl;dr
At smaller widths: text boxes get taller, images get shorter.
I know that, but here I have a text that clearly takes up less vertical space than the image.
The image div is ALWAYS smaller than the text div. That’s what’s weird
If you are talking about the white border around the text being slightly taller than the image at wide screen then that’s because the image is stacked on the baseline (not the bottom) so the height is matched including the space under the image (where descenders would appear in text).
Just set the image to display:block and it will be placed on the bottom and match the text block at full widths.
e.g.
.service-img img{display:block}
Note that your footer is in the middle of the page because you have used height:100% on the wrapper so anything over 100% height is ignored and plays no part in the flow. Don’t use height:100% in this way unless you know 100% what you are doing.
You also seem to be overusing flexbox a bit. I would use it for those two boxes but not for the whole site and everything else.
Thanks, that fixed it. I don’t know WHY it fixed it though. Why was space being added below the image in the first place 
The footer works fine for me. The only time I’ve seen it in the middle of the page was when I tried opening the page on my new phone without updating the browser first.
I love flexbox :V
So easy and comfortable to use.
Paul explained here
An image is displayed inline by default, the same as text. Text sits on a baseline (a little above the bottom) to allow for descenders.
Its broken in most browsers for the reasons I’ve already said. Chrome is broken , Ie11 is broken and Safari on the mac is mangled beyond repair which means that ios will be broken also. The only browsers that displays it ok are Firefox and Edge and is probably down to the way they are error handling the conflict with the height.
I will re-iterate that you cannot use height:100% in the way that you are using it.
So do I.
Flexbox is by no means easy to use or to understand but once learned is a powerful tool. However it should not be over-used as it has a significant detriment to performance of the browser. Just use it where its needed. Don’t add it to things that don’t need to be flexed.
3 Likes
Stupid non Firefox browsers 
How would you make this design work? 
Had no clue about that inline thing. Thanks for teaching me.
Remove the height:100% from the wrapper for a start
Why do you think that you need the height:100%? Is there some behaviour that you wanted that I am missing? It may be that you have something in mind but I don’t notice anything special needed.
Well, if I simply remove the 100% height, the content div doesn’t span the entire height of the page and the footer starts where the content ends, even if that’s in the middle of the screen.
Add min-height:100% when you remove height:100% from the wrapper and that should give the minimum height?
(As I mentioned in my previous post I need to know what your intentions are and it seems that you want a ‘sticky footer’ approach. This was hard for me to guess as your page is miles taller than the viewport and therefore not an issue on long pages. )
Hahaha, that fixed it 
Again I don’t quite understand it, but cheers!
Only two of the five pages are taller than the viewport btw.
It’s easier to explain if you imagine you set a fixed on a div of about 200px height. Then inside that div you add content that is greater than 200px height. What is the browser supposed to do with that content that sticks out of its container?
The answer is that the default of overflow:visible allows the content to simply spill out of the parent container but then takes no part on the flow of the document because it will be ignored. This is compounded in your example with the use of flexbox and the browser is now trying to work out how to flex all the items inside a container where they don’t fit. Hence the various differences in browsers as they all try to handle your logic errors.
When you say height:100% (and assuming you have an unbroken chain of height back to root to base this on) then all you will get is ‘one viewport height of content’. If your content is greater than the viewport height then it overflows and is ignored as far as the flow of normal content goes.
If on the other hand you use min-height then the element is set to the minimum height you required (same caveats for height though in that an unbroken chain of height (not min-height elements or content height elements) back to root must be in place otherwise percentages revert to auto even for min-height). Min-height allows an element to grow so when you add more content it stretches the parent container and does not overflow it.
Percentage heights are a tricky subject and not well understood by most who use them:)
The vh unit allows an easier method to acces a viewport height without requiring an un broken chain of parents with specified height being in place but the same rules apply in that if content doesn’t fit it will still spill out.
3 Likes
Actually that makes sense. Once again, thanks!
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.