Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am trying to build up a responsive image gallery by following w3schools tutorials. Everything seems to working very fine except one serious issue. I googled a lot but couldn't find any silver bullet solution to fix it. I'm posting a screenshot to make your better understand about my issue. Here's a look:
It's very much obvious what's the real problem. Right. So what should we do? Should we have to give a min-height for every div? The text comes dynamically from the database and sometimes it is mandatory to display complete text without trimming it.
Note:
Using min-height causes one another problem. When we resize the browser to tab width then it creates a lot of blank space between div rows.
You've not post a code, so I can offer you a flexbox solution.
Here's a Fiddle.
These flexible boxes will stretch according to the text and they will fit the parent container, regardless of the text inside. I hope it will help you. Flexbox is a layout system which is very powerful and easy to learn, and it is mobile ready.
.flex-container {
display: -webkit-flex;
display: flex;
width: 500px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
flex-basis: 200px;
margin: 10px;
}
.img {
width: 200px;
max-width: 100%;
height: auto;
}
In case that (almost) full and guaranteed support for the latest IE versions is required (or you want a fallback of some sort), and you do not wish to use JavaScript, there's also the option of using text-align: center on container and on image wrappers display: inline-block as well as vertical-align: top.
The text-align: center isn't actually required, but it will center the image wrappers (containers of image and image text).
This will still leave some white space beneath the image wrappers but each image will start on the same line, so to speak.
You can see a fiddle here, based on the layout of #Julsy : the fiddle
Note:
This solution does have a slight downside regarding white space due to the inline-block elements. This means that sometimes setting two inline-block elements to 50% width each will make them jump to each separate line. However I've used this solution in several applications by simply setting the width to 49% e.g. In many cases the difference isn't noticable at all, and given the white space between the elements they often are aligned properly (in my opinion). The white space can even make up for some of the spacing between the elements such as margin.
The white space stems from the actual spaces in the text of your HTML document.
You can read a bit about the phenomenon of these white spaces here. It seems that it's not really an error, but just the way the browser works.
The prettiest solution in my opinion surely is the one #Julsy suggests (the flexbox method).
As to why your own code isn't working is due to the float. When one of the elements is lower (lower height) than the other, the element following it will "float" underneath it. I think that the logic behind this can be thought of as the following (correct me if i'm wrong): if you view the containing element is a set of "text lines" (as in a regular book or text in here) with a reading direction from left to right, the element with float:left will attempt to get as close to the upper-left corner as possible (which is where you start reading from). In this case, the closest place to the upper-left corner is beneath the lower element as this is on a "line" above the bottom of the highest element.
I hope it makes sense :-)
As you already wrote, a min-height is the best method to make those floated boxes be the same height and still have the "emergeny option" to expand them if there is more content.
Add display: flex to the parent element. For more info about flexbox.
i tried to do the same with only css, but i got tired, maybe u can use javascript to fit these kind of stuff with different heights, because these needs to be calculated, i use this: http://masonry.desandro.com/ basically this convert every element with position absolute and give it top and left positions from prevs/next elements, for example
the first (size 100x200) will got left 0 and top 0,
the second (size 100x400) will got left 100 and top 0,
the third (size 100x200) will got left 0 and top 200,
the four (size 100x200) will got left 100 and top 400)
and continues...
Related
I am blocking out a new page for my site that is going to be responsive with a sliding divide separating 2 columns. On the left column I have a couple vertically stacked divs, the bottom of which I want to scroll its contents when it overflows. I want only the div to scroll and not the entire page.
I have already set the overflow-y to scroll and while this does produce the scroll-bar it still expands the entire page rather than recognizing the edge of the window. I have a feeling it has to do with the parent containers size not being fixed and I thought setting it to max-height: 100%; would resolve this but it has not.
here is the jfiddle
jfiddle
It is basically just a grab from my sandbox site wtb.dsdcs.com but it seems to behave the same in the jfiddle so it should suffice.
Just a disclaimer: there is a video the autoplays in both the website and jfiddle that I left intact in-case its container is part of the issue, so may need to turn down speakers.
Clarification: #PlayList is the element I wish to be able to scroll.
You need to give your Playlist class a height - (e.g 400px). Then, as you add more a items you should get a scrollbar. You can remove max-height as that won't be needed.
If you want a dynamic height of the playlist, that always takes up the remainder of the height, you could add a jQuery script:
var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);
Since your videoWrapper is set to take up 50% of the height, the other approach could be to set your playlist to have the other 50%. So set it to height: 50%.
.playlist {
padding: 10px;
font-size: 12px;
overflow-y: scroll;
height: 50%;
position: relative;
}
EDIT 17 Oct:
The reason the above might not work with all browsers is probably because of your implementation. Like I said in the comments below, you shouldn't be using table-type display properties because they don't support overflow very well.
The W3C even say that the overflow property only applies to block-type elements LINK.
The MDN suggests the same LINK.
As such, implementing overflow on any table-type element will always be a tricky and risky approach as browser support issues or browser display inconsistencies should be expected. To get a fully supported solution, I'm afraid you'd have to try other display properties such as flex or block.
Unfortunately, there is no way to get a fully supported solution for overflow on table elements, and therefore such answer cannot be provided. The only real "solution" here that would actually solve your problem would be a complete (or partual) overhaul of your entire site.
However, I hope the above gave you hint of direction of what to do next and as such being an acceptable answer for you.
Good luck!
As the title suggests, I have two stacking <div>s.
They are placed in an absolutely positioned container that covers the whole page. Basically, those 2 <div>s, taken together, should also cover the whole space of the containier.
Another important aspect is that these <div>s have dynamic content. The bottom one can have a lot of content, so an overflow: auto rule is required. The top one can also have dynamic content, but it's not really expected to grow out of control. Thus, I don't want to cut the overflow.
The main question is: How can the top one affect the other one's height without the risk of overlapping? (I prefer a CSS only solution, or something that wouldn't imply JS pixel values computations)
Here are two images that describe the best what I'm trying to achieve:
"initial state"
a state with some more data in the top div
Here is also a JSfiddle for convenience: http://jsfiddle.net/60qan4t6/
This is the kind of situation that display:flex handles extremely well. Update to your fiddle:
http://jsfiddle.net/60qan4t6/1/
Note, I quickly wrote this, so it's missing browser prefixes to support some browsers, but the fiddle should work in Chrome just fine.
Be sure to see check browser support for flexbox here:
http://caniuse.com/#feat=flexbox
If it's acceptable to set height to div's you can use such an example
.top-area {
background: red;
overflow: hidden;
height: 40%;
}
.bottom-area {
overflow: auto;
height: 60%;
}
http://jsfiddle.net/xqh2vw2g/
Hy there. I'm macking an HTML/CSS tutorial and I'm facing some problems with positioning and those stuff. I got 3 stacked elements at my header and want them to be at the very center.
So I try something like this:
.container {
margin: 0 auto;
width: 940px;
}
at my CSS code, and add this class to those elements. It is recognizing the comands, since it moved a bit. But not the way I expected:
It remanied at the left, just a few more steps to the right. Funny part is: if I put something like
.container {
margin: auto 50% auto 50%;
width: 940px;
}
it's behavior is:
it GETS centered, but extends the screen lenght and put a scrolling bar. Why? Shoudln't both those options center my elements? What can I do to achieve my goal? I would appreciate an answer so much, since I get a lot of difficulties when trying to understand this part.
In your first example, the element is centered fine - it's just still 940 pixels wide, nearly the entire browser, thus not really far from the left edge. If you want to center its contained elements as well, just add text-align:center to it.
To see better what's happening, consider temporarily adding a background:red to the element and a lot will be clearer. It makes learning CSS tons easier to actually see the 'boxes' of the box model doing their job.
In your second example you appear to be confusing the order of values of the margin declaration. You're actually giving it a left and right margin of 50%, putting its left edge indeed right in the center. The 940 pixels width then make it stretch off to the right, still 940px wide, causing the scrollbar.
.container { text-align:center }
Give it a shot.
This would be straight forward to solve if you added your html as well.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I've been trying everything i know for the past 1.5 hours and cannot figure this one out.
Actually far as i can tell, margin and padding are at 0, however, the containing divs are so far, inexplicably 4px wider and 1px taller then the containing image. I don't know where that comes from.
Few things which may be causing this:
I'm setting the max-width and max-height of the images via javascript to the size of the window.
I'm working with a combination of table, table-cell and inline-blocks to set typography in the way i need it.
Also working with body and html at 100% width and height
This is a Tumblr theme customisation (started from scratch though)
Code wise, it's hard to put the entire lot in here, so for now, I'll just give the link.
Hopefully if this can be figured out I'll be able to post the problem code in this question so it's good for reference in the future.
The link: http://syndex.me
Thanks
You mean on this guy?
.post.photo {
display: inline-block;
position: relative;
height: 100%;
}
You're likely not looking at margin, you're looking at textual whitespace. Since that div is being positioned as inline-block it's acting like an inline element, say, a word or a <strong> tag. If you remove the space between your starting/closing <div> tags, your "margin" will magically disappear.
If you're using inline-block for positioning, line-height: 0 and font-size: 0 are your best friends; they close up any effective whitespace, though they're very ugly hack. Floats are a better solution in most cases.
See #column_content and #column right on The Fashion Spot to see inline-block columns in use.
You have spaces between the divs because you use display: inline-block and the divs are separated by white space. It's just like you'd be writing letters on different lines: they'll appear with one white space between them. The vertical white-space happens because of the same reason - images are displayed as inline and the browser reserves some space for the line-height. The solution is to use display: block and float: left for the divs and display: block for the images.
In this case, i could not use float:left as there seems to be no reliable way to achieve center aligned series of divs using it. The answer is pretty simple, any mark-up within the inline-blocked, center aligned wrapper/child sequence needs to have no white space in between them, and should be wrapped in one continuous line of code. Pretty stupid, but it works 100% for this scenario.
I have a grid of products four wide
http://jsfiddle.net/QpX4f/4/
Why won't margin:0 auto; on the product images centering them? And why aren't those view buttons inline?
http://jsfiddle.net/QpX4f/5/
Note that i'm not sure what you're trying to achieve with the blue bg but it appears to be the exact same size at the product image... i've just placed it exactly behind the product image, move as you please
edit :: I'll add my two cents to give you some pointers so you can learn.
A few notes, your CSS could use some real organization. This smashing article is great for learning about css.
Next, you're using floats all over the place and I'm not sure why. Float only the elements you need to which is your container for each production.
For the bg image, you just need to actually set its coords to center it, also, the floating if the product image inside the link was messing up its position, and your margins were taking it out of center.
The view button is unnecessarily wrapped in a p tag, which does nothing.
In my opinion your markup is extremely bloated. You should start with simple cases and only add declarations when you see fit. Lean CSS is often much easier to debug than bloated. (as with any code really)
Also, using a tool like Firebug or Web Inspector will really help you see how your css declarations actually affect the positioning of elements.
answering your new question
your margin:0 auto was most likely messed up by the floats. This would would if it was using a normal inline display with not float. The view buttons were inline, they were just pushed down according to the content above, to take it out of this display mode I made it position:absolute (note you have to position the parent relative) and just set it to be at the bottom left.
Here you go: http://jsfiddle.net/gVLXV/
So...
ul.display li .image { background: url(http://propono.co.uk/image-shadow.png) no-repeat top center; } /* Added top and center to the background. */
ul.thumb_view li .image { padding:0 0 0 8px; }