This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Remove white space below image
I have this page HERE. All four boxes with the images (one long horizontal and 3 smaller ones at the bottom) all have empty space below the image and above the bottom border. If I make these boxes have a pixel height it goes away but I need to leave it at auto because its a responsive site (work in progress). I cannot figure out what I'm missing. Any suggestions would be great!
CSS is HERE
Thank You!!!
You can set the images inside those boxes to:
display: block
That should solve it.
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 15 days ago.
Codepen: https://codepen.io/andrerpena/pen/JjBzKNg
I would like the button bar to always be visible where the blue --> is pointing, when the screen squeezes.
My document structure is like this:
div[#id='title']
div[#id='body'] <-- This should grow
div[#id='body-content'] <-- This should grow and be scrollable
div[#id='body-buttons'] <-- This should be fixed at the bottom
According to the above structure, I'd expect body-content to scroll and body-buttons to always be visible.
Why is it not? Is there any way to fix it without changing the DOM structure? If not, how would you change it?
I'm personally interested in knowing why it doesn't work, because I do CSS for more than a decade and I still get surprised by stuff like this.
Thanks.
Flex child has an initial value min-height: auto which means that it will not have height less than the content height (the texts). In this case you can add min-h-0 class to the div[#id='body'] (#body) element so that it doesn't have to have a minimum height. Here's the working codepen.
This question already has answers here:
Place boxes inside ul in center, but align them left
(1 answer)
Making a container fit the width of its children
(1 answer)
Closed 3 months ago.
How do I ensure that items in a container are centered regardless of screen size?
I am trying to create a responsive/dynamic layout on a web-page that has a container div and some results/items (divs) inside. I would like them to flow within the available width but have uniform margin/alignment within the centered div which I am struggling to achieve. Here are three images of what I want to achieve. This could be a desktop, a tablet and a phone:
So far I've had to go with a cut-off width of e.g. 800px and two different layouts, but that's not optimal. The container should be dynamic, for example 90% width but the items inside fixed width of 200px. I can use flow:left; or display:inline-block; to flow the items inside, but they will always be left aligned, so that when one "slides" down to the next line, the remaining are sitting to the left with a gap to the right.
This is probably a common use case, and I'm happy to be referred to other answers, but I haven't been able to search correctly in order to find the answer.
EDIT: I know that I can do this with JavaScript. I could probably use getBoundingClientRect on the container and with code adjust the margin of the items, but there must be a CSS solution :)
This question already has answers here:
Stretch image in iron-image element
(4 answers)
Closed 7 years ago.
Check out this jsbin
I want my images have auto height with sizing="contain", it means they won't have extra space. In my example those extra space are in red.
iron image is required to set a fixed height otherwise image not display, I tried height:auto and height:100% but not work.
I was using paper-material, should use paper-card
This question already has answers here:
Why does CSS float not change the width of the following div?
(3 answers)
Keep text from wrapping around floated image
(3 answers)
Closed 8 years ago.
It's kinda hard to describe what I'm trying to do, so take a look at this fiddle:
http://jsfiddle.net/GinSan/g8mmdcuw/
As you can see, the text flows around the image, but starts at the very left of the side under the image. I want the text to keep the indentation level, even if it's height excels the height of the image. The Images at the bottom should behave like that as well, so that both the the text and the images would be indented from the left side by the image width plus it's right and left margins.
Just increasing the bottom margin of the image would probably work, however this would push everything underneath it further to the bottom if the text is too short, it has to work with different text lengths.
I accomplished to keep the text indentation at one level by adding this:
p.memberlist_descr {
width:70%;
float:left;
}
However, since the text now has a defined width, it wouldn't work on smaller screens. Also, this has no effect on the smaller images below.
Is there a way to accomplish this, if both the text length and the width of the box surrounding are unknown?
This question already has answers here:
CSS customized scroll bar in div
(20 answers)
Closed 7 years ago.
In a div I gave overflow auto to have a scroll bar to display the content that exceeds the limit
My scroll bar appears in blue color that doesn't suit my layout how can i change the color
div#navigation{background:#efe9b9; overflow:auto}
This is the css i am using ... I want brown colored scrll bar
How to get it
(except in IE)You can't change Scrollbars with CSS only, check out the JScrollPane for a Cross browser compatible scrollbar changer.
You can in IE, but I think it's been deprecated (or removed in IE8).
You can also do it in Safari.
Be warned that it will affect usability negatively.