This has plagued me for so long, and I've only ever found solutions that reduce the issue, rather than eliminating them. Three divs of 33% width (so technically, not even 100% combined width) look just fine on my screen, but when zoomed in, the left-most div falls to the next line. Why is this?
Mind you, this is after eliminating white space in code. I use the > selector in CSS to set the font size of the containing div (that holds the other three) to zero, which achieves the same results as the uglier, less readable solutions of putting things on one line, or using HTML comments.
I shouldn't need to provide any example code. It's an issue in any set of inline-block divs set to percentage widths inside a containing div.
It is happening just because of spaces between inline-block divs...
like Code
On above code browser counts a space between and
So add css property to parent
.parent {
font-size:0px;
}
See difference between this fiddles
Your Problem http://jsfiddle.net/BS72X/1/
Nd here solution http://jsfiddle.net/BS72X/
Hope this helps you..
Related
I'm trying to make a list of thumbnails of variable amount be centered while the thumbnails all fit on one line, but then subsequent lines be left-aligned, while the parent element responsively stays centered in the page. width:fit-content works well for one line, but when there are multiple lines it goes to 100% width (in mac chrome anyway). Illustration of the problem:
http://codepen.io/scotthorn/pen/eutAH?editors=110
If there is another way to achieve my desired goal, I wouldn't mind changing any part of the css or html markup. A background that fits the area isn't necessary, it's only in my example to better show what's going on. My primary goal is to have a list that behaves like a centered container of inline-block elements for one-line, but then when a second line has to be created, the first element in it lines up below the first element of the first row rather than being centered by itself.
Hopefully that makes sense, if not I can make a mockup.
I would imagine wrapping the whole thing in a div and centering that with a % width would do what you want. But a mock up would help me understand.
Or you may be able to use margins to squish the inside content.
Your example works well, except you probably want to add a max-width to your UL..
For example, if you wanted to have a max of 7 items per line in your case, you would
add:
ul { max-width:630px}
updated codepen
good luck =)
Kind of hard to put into words, so here's the jsFiddle showing it.
When hovering over one of the green blocks, I wanted its background to expand enough that it "touches" the contiguous rectangles (it overlaps their margins). However, when hovering over the last block of each line, the layout goes wild: the line below only shows one element, etc.
The cause seems to stem from the negative margin; since, if the margin for the "expanded" class is set to plain 0 instead of -5, this problem doesn't happen. But of course this would leave a space between blocks.
The size of the parent container doesn't seem to alter this. Note that for now I'm not particularly concerned about the fact that the expanded block isn't well centered and makes the others in its line wobble a bit, although it may be linked to the problem.
Change de padding of the extended into 10px
http://jsfiddle.net/TMXLz/4/
The only way I can see to do what you want is to position each of those blocks absolutely (position:absolute) into the place you want them. You're main issue here is that the changes you want to make to the box are going to cause them to encroach on each others space. So you either need to adjust all their spacing (using js) on each mouseover (which sucks). Or absolutely position the items into place (specific positioning style for each box) then you won't have an issue with them overlapping partially. Just be sure to increase the active ones z-index so its always 'over' the others.
This may be the output you are looking for
http://jsfiddle.net/TMXLz/5/
I find myself placing a lot of divs, images and content in general with position:relative to stick to the design I'm following.
For example if I wanted to place a form closer to the top I'd put in :
.form_class{
position:relative;
bottom:150px;
}
Since the element keeps its position in the flux, I'd then have to put every other element upwards of 150px with position:relative as to keep the gap closed.
I feel like this is sloppy programming, how do real web integrators position their elements ?
Thanks in advance.
There is a potential problem with using relative positioning.
If you are using the relative positioning to circumvent a problem with a gap, the problem is still there in the background. If the gap comes from a margin for example, then the margin is still there. If you don't know where the margin comes from, you don't know if it's the same in all browsers, and you don't know if any seemingly unrelated changes in the markup might change the margin.
Also, as you mention, you are just moving the gap from the top of the element to the bottom of the element, so you have to keep adjusting all the elements that follow. With each adjustment you are potentially adding another level of insecurity, where the layout might break in another browser.
Most browsers have a developer tool, where you can inspect an element to see exactly what CSS is applied to the element, and what the margins and padding are. You can use that to find out where gaps come from, so that you can remove them at the source instead of circumventing them.
There are a lot of ways to position elements, from margins and paddings, absolute positioning, floats, parent containers, explicit widths and heights. Without seeing your markup it's hard to critic but usually there are better ways than relative positioning. If you want to post some markup try http://jsfiddle.net
I have two <div>s inside a parent <div>. Both the inner ones are styled with no padding, border or margin and as width:50%; display:inline-block;. The outer <div> also has no padding, etc. Firebug shows the outer <div> to be of 1240px width, and each inner one to be 620px. So why do they appear one below the other and not side-by-side? If i lower their width to 618px, it works. Huh?
display:inline-block is inconvenient in the way that it takes in consideration mark-up whitespace when drawing the elements, AFAIK. Try setting font-size:0 to the parent element if it doesn't have any other text, and set the desired font-size for the child elements.
P.S., first try eliminating white-space in the mark-up between the elements, to see if that corrects the issue.
It sounds like a fairly simple solution, if you have two blocks, A and B and they are the exact same size and you are looking at them straight on and they are lined up perfectly you will only see one block.
You're trying to make something display that doesn't fit inside of the container. You've already solved your problem size the container up or the contents down mildly to fit them together.
The font size I need to match the design I have is 85pt, which is extremely large. In IE6 and IE7, my design is affected because the divs that contain these elements become larger than they normally are, and as a result, elements under these are pushed further down, somewhat breaking the design. I have the height defined for these elements and when I decrease the font size, the elements begin to shrink to the correct size. I've added line-height: 0; to the element and this works in all modern browsers.
Unfortunately, the design I'm working on cannot be shown publicly, but I was hoping to get some insight into other possible techniques that I could try to get the design to render correctly. The height of the parent element is 144px, which includes 10px padding on top and bottom and a top and bottom 1px border.
Unfortunately there's not a lot more that I can add to this, but I'll include whatever info I can if asked.
line-height:0 is a great start. However, I'm a little concerned about the 10px padding on the parent element. Whenever you mix padding with IE, you start to lose control over width & height.
I'd start by removing the padding-top on the parent and convert that into a margin-top:10px on the actual child element. If that still gives you trouble, remove the margin and try a position:relative on the child with a top:10px.
Finally, try adding a overflow:hidden to your parent element to force it to not budge when the font-size gets larger.
All this depends on what your child element actually is. If you convert it to an inline element (like a span, em, or strong) it might help alleviate some rendering issues, depending on your predefined styles.
Another thing to consider - are you using floats? Sometimes you'll get a double-float issue with IE and floats. A quick google for "IE double float" will show you why.
Does that help?
Convert the font-sizes to pixels and use px instead of pt. Make sure there that padding, margin and border is 0. Verify that there are no whitespace in your HTML except for between words. Whitespace can end up being displayed as a newline or space, making elements bigger than intended. Also don't set line-height to 0, set it to either auto or the same as font-size.
Thank you all for your input. Originally I needed absolute positioning on the element in question, while the parent element had relative positioning. However, using this with line-height: 0 caused the text to disappear in IE6 and 7; after trying to figure out where the text was initially, I removed absolute positioning and decided to leave the text left aligned in IE6 and 7, which affected the position of other elements as a result. I revisited the original absolute positioning and added border to the element to reveal its location. Doing this showed that it was exactly as I defined it: an element with a line-height of 0px, so the top and bottom borders were next to each other. For IE6 and 7, I defined line-height: 100%; and my text was almost where I needed it. I added top and the needed pixels and now my element is in the correct position with its line-height not affecting any of the other elements because of the positioning.
Thank you all again for your assistance.
My first thought when reading your post was to adjust the line-height, but since you've already done that, I'm not sure how much more can be done. From your summary, I gather that the design cannot be modified to account for the large font sizes.
Another answerer recommended using pixel sizes, but I would recommend using ems as they are percentage dimensions and will be more consistent across browsers, screens, and resolutions.
Line-height can be left as 0 (or set it to the height of the parent element), but you will likely see the text floating over other elements if the text's height surpasses the line-height.
Any possible way you could use an image for the text instead? That's really the only fool-proof method for getting all browsers to look consistent.