I have absolute positioned div that is used as a tooltip with white background. So his position is set based on mouse coordinate.
I want my tooltip to have max-width but if smaller then width should be based on content.
If I put max-width and wrap text is wrapping after every word.
EDIT
here is an example of usage
https://jsfiddle.net/miniverse_solutions/sgct5qux/
I also realized that translate3d is missing in up. First I found this example where it works like I want it to work
http://jsfiddle.net/audetwebdesign/vVhWR/
Next thing I realized that my parent nodes have width = 0.
When I add width = 0 in that sample it works like mine, so then I tried removing in my example same width = 0 but it still didn't work. It looks like translate3d is messing with it.
Since having only one wrapped absolute div with width = 0 reproducing the same problem, it looks like to me that when two absolute positioned divs (one inside the other) automatically sets outer div width to 0.
Removing absolute positioning from outer div solved the problem.
Don't know why was outer div even absolute when he is always rendered right under body with top and left having value 0.
Related
I'm specifying a div inside of a td tag. As soon as I specify the width of the div in pixels, in addition to that width Chrome shows a huge right margin and I don't understand why. I'm curious if anyone can help me make sense of this.
This js example shows the exact problem:
https://playcode.io/625077/
But with no width specified, there's no mysterious margin:
https://playcode.io/625261/
Also, there appears to be a ratio at play: for every 1 pixel of width that I specify on the div, I get several pixels of mystery right margin.
Update: even hard setting the margin and padding of the div to 0 seems to have no effect, leaving the remaining margin in place:
All div has a default margin and padding. Your div inside a tb element is doing that. If you remove this div tag and let "test" stay just inside your tb element, the "test" string will touch the right side of the page.
Playing with the default tb style, you'll see that it tries to split the total width given (100%) equally between all tb elements inside a tr element. Doing so there is no space for a default div element which doesn't have this same property to be fit and also has a specific margin. The result of a div element inside a tr element is getting it longer than usual.
I have a div, .instagram_grid which has margin-left and margin-right set to auto, is relatively positioned, and has a width which for browse sizes 900px >makes the div be centered nicely in the page.
when I have the simple structure in the context of the rest of the CSS for a single page, the no longer becomes centered at browser width >1684px. In the Fiddle that follows I only have two lines that modify the div as a whole (and one just sets the background to pink). There are no media queries present, which suggests that it is the effect of some unseen preceding div/element causing the behavior.
https://jsfiddle.net/ebbnormal/m561tpnL/6/
The behaviour is what is expected with that markup.
The element is centered, but then you use relative positioning to show it 500px to the right of where it actually would be.
The .calc-text div above the .instagram_grid div causes its parent to overflow by setting margin-left:auto while simultaneously setting left: to a negative value, which isn't valid CSS.
So, I have this code
http://pastebin.com/W3ggtgZB as css, and the body looks like this:
http://pastebin.com/2tkmhnfW
What I am trying to do is create a div with two children divs, one of which has a fixed width, and the other one I want to fill the rest of the blank space. I'm eventually going to want a div going across the top of this side div, too, but, that comes later. My issue is, the child div sub1 expands to be 100% of its parent width, which is an issue, because then it overlaps out of the parent div and keeps going. I tried things like floating left, using block and inline, I tried setting the width to auto (which makes it disappear for some reason) - but nothing seems to really work. It looks okay, at first, but when you zoom in, sub1 kinda follows its own rules. Can someone help me fix it so that sub1 will just fill in the rest of the space left in the main div?
Here is the answer:
http://dabblet.com/gist/6069015
Only need to specify the side column's floating and the rest will take place as you want, adapting the screen size as well.
Hope it helps!
I want to display a tile based map for a game. My current approach is to have a fixed sized div and to place absolute positioned smaller divs into that outer div. If there is something on the map at a given coordinate, I set the background picture for the div at that position. (see http://dungeonpilot.com)
Now I don't want the outer div to be fixed sized. I would like the inner div to use the whole browser space. I think I can achieve this by setting width and height to 100%. But in case, that I make the browser window small, so that some of the inner tiles aren't visible anymore, I would like to see scrollbars. But somehow, neither setting overflow to auto for the outer div, nor to the documents body does the trick.
Where and how do I have to set the overflow attribute, to get the intended behavior?
Found a solution!
Apply overflow: scroll; to the #masters_view and #party_view divs.
Tell me if it worked.
I'm working on a jquery slider, except instead of using a fixed-width container, I'm using the whole browser window. I've got jQuery set up to fix the margins to make sure it's centered correctly (although I just made them 500 pixels in the demo to keep it simple), but the problem is when I try to add more divs, it puts them on a second line instead of putting them beyond the edge of the browser. Here is my code: http://jsfiddle.net/JsPZT/
Eventually, I'll change the overflow so that they are hidden when they are beyond the edge of the browser, but for now, I just want to know that they are on the same line and not being pushed onto the second.
So my question is what should I change in the CSS to make sure the divs are always on the same line, even if it means pushing them beyond the edge of the window?
To get divs to stay on the same line when they are off of the screen, you have several options. Here's what I can think of off the top of my head.
Make the parent container always large enough to hold the divs you want to float. Theoretically, they shouldn't jump down to the next line that way, but I haven't tried it myself.
Another option is to use a combination of display:table and display:table-cell on the parent and children divs respectively. You just have to make sure you are supporting the browsers you want to support.
My last idea is to set each div with position:absolute. Then, just adjust the left attribute to 100% * x to place the div off the screen to the left or right. Depending on what you are trying to do, when they are off the viewable area you could just leave them at left:-100% or 100%. The same should work for the top attribute if you want the div to be off the screen above or below the viewable area.
Try white-space: nowrap;
If that doesn't work, you will probably need an inner div with a width that's the sum of all contained divs.
You need to add a width to your #track CSS. That is your wrapper, and without a width on that, the items will just overflow and drop to the next line. You'll probably have to add another div to set the overflow and get everything positioned correctly.