We Keep Coding

span with position:absolute won't create scrollbar on container overflow

I want absolute-positioned SPANs inside a container show scrollbars on the container when its position overflows the container.
However, even with overflow:auto on the container, the SPAN flies outside the container div, as if it does not belong to the container.
I will append many SPANs, so other values of position (like relative) will mess the independent positioning desired for each SPAN, albeit making the scrollbars.
Here is the fiddle:
https://jsfiddle.net/v8x2bot4/1/
CSS:
.container {
background-color: #AFF;
width: 500px;
height: 500px;
overflow: auto;
}
.fly {
border: solid black 1px;
background-color: #0F0;
position: absolute;
}
HTML:
<div class="container">
<span class="fly" style="left:450px; top:100px">blablablablabla</span>
<span class="fly" style="left:300px; top:200px">blablabla2</span>
</div>
How can I hide the overflowing part of the SPAN and make a scrollbar appear as needed?
Hope HTML+CSS can do it without javascript. But solutions with javascript that work regardless of the number of SPANs should be very easy to maintain and suitable.

Add position: relative to .container
https://jsfiddle.net/xfmrtx3s/

Separating two select boxes on same row equally in CSS

I have a container that is a certain width.
I have two select elements rendering on the same line in this main div container. The first one is absolute positioned 40px left from the main div container and the right one is absolute positioned 40px right from the main div container. Thus, resulting in a centered container within the main div container.
My goal is to push two select elements into the resulting container that sit on either side of either, having the same width, and having a space equidistant in the middle.
Here is my current HTML:
<div id="container">
<select class="edit" style="left: 40px; top: 290px; width: 136px;"></select>
<select class="edit" style="left: 190px; right:40px; top: 290px; width: 136px"></select>
</div>
So in this one we are assuming that the left has a combined pixel count of 40+136=176px, width plus left positioning and the right having a pixel count of 190+136+40=366, left positioning plus width plus right;
the result would be a container having two equidistant select boxes within the constraints of 40px each way.
I'm not sure if my math is correct but any assistance with this would be greatly appreciated.

Try removing the left:190px from the right hand element. The right:40px is enough to position the element to the right.

I'm not sure if this is exactly what you're looking for, so let me know if I've misunderstood something, but what about this solution (note that .edit could just as easily have a strictly %-based width, I just wanted to show how flexible this solution could be):
https://jsfiddle.net/Lcn51a1p/
HTML:
<div class="container">
<select class="edit"></select>
<select class="edit pull-right"></select>
</div>
CSS:
.container {
margin: 0 40px;
}
.edit {
width: 120px;
max-width: 50%;
}
.pull-right {
float:right;
}

Avoid overlapping divs horizontally

I want to modify CSS or do a javascript for success two conditions:
Example:
(------------------main div-----------------------------)(------right div -----)
Conditions:
1) If there are a div in the right of my main div, display my main div like the example.
2) If the right div dont exist, my main div must get all width.
I can set width with a determinated size but this dont meet all conditions.
Somebody can help me?.

This is already answered here : 2 column div layout: right column with fixed width, left fluid
Use width:auto and overflow:hidden css styles for your main div so that it takes only the required width.
Example HTML :
<div class="right">
right div fixed width
</div>
<div class="left">
left main div flexible width
</div>
CSS :
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
width: auto;
background:blue;
overflow: hidden;
}​​

Get height, or width, of a div with overflow property and use that to set a limit on the scroll bar

This might be a simple question, but unfortunately I can't figure out how to do this.
Let's say I have a div with an overflow property, so that when I add some text to it that is bigger than its dimensions, a scroll bar appears to fit the text within it, as so...http://jsfiddle.net/Lddxgzvz/
What I want to do is use plain javascript to get the new dimensions of the div with the scroll bar and use that to set a limit on how much text can be added to the div.
I'll try to illustrate this...
Let's say the limit on how much can be added to the div is 200px, meaning I want the scroll bar to remain static once the div reaches this size. So, for example, if the following text width is 250px:
Hello World Foo Bar
and the word Bar is 50px, I want only this text to appear within the div:
Hello World Foo
I tried using javascript to get the height and width of the div, but it does not take into consideration the overflow property. It only gets the height and width which I set the div to be initially.
I hope you all understand what I am trying to do, I'll re-edit if necessary.

You can try adding an inner wrapper with this CSS:
display: inline-block;
max-width: 200px; /* Maximum scrollable amount */
overflow: hidden;
.outer-wrapper {
border: solid 2px black;
height: 100px;
width: 100px;
overflow: auto;
}
.inner-wrapper {
display: inline-block;
max-width: 200px;
overflow: hidden;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
LongLongLongLongLongLongLongLongLongLongLongLong
</div>
</div>
<div class="outer-wrapper">
<div class="inner-wrapper">
Short
</div>
</div>

As I understood you search scrollWidth and scrollHeight
console.log(document.getElementById('div').scrollWidth);
console.log(document.getElementById('div').scrollHeight);
Demo: http://jsfiddle.net/Lddxgzvz/1/

IE6 CSS Z-index

I have a a list of image swatches when on mouseover a div popup should appear above all content. However I am finding that in IE6 that the div popup is sitting behind the elements that are generated after the popup. It is sitting correctly ontop of elements rendered before the popup.
A rough idea of what I have:
<ul>
<li>
<img src="image path to swatch">
<div class="tooltip">TOOLTIP POPUP</div>
</li>
<li>
<img src="image path to swatch">
<div class="tooltip">TOOLTIP POPUP</div>
</li>
</ul>
I have quite a few of these ULs stacked on the page.
Rough idea of the CSS
ul li {
width: 150px;
height: 20px;
position: relative;
}
div.tooltip {
width: 300px;
height: 300px;
position: absolute;
top: -20px;
left: -20px;
z-index: 1000;
display: none;
}
I have tried making the parent li have a z-index of -1 and position relative, but this also hides the swatch. The swatches are generated dynamically and I need the individual tooltips to be positioned near the swatch itself, which is why I structured it inside a list.
I have also tried to increase the z-index using javascript when the swatch is hovered over so that it is the highest above all else, but this hasn't worked either. Eg:
$('ul li').hoverIntent(
function(){
$('div.tooltip', this).css('z-index', '9000');
$('div.tooltip', this).stop(true,true).show();
},
function() {
$('div.tooltip', this).hide();
$('div.tooltip', this).css('z-index', '1000');
});
Running out of ideas, so if anyone could help please? Thanks.
The code can be seen on JS Fiddle at: http://jsfiddle.net/melon/nUTgB/13/

To fix a lot of IE z-index bugs, keep this rule in mind:
If something has a position attribute, it always needs a z-index
That has helped me a lot with browser testing. That means that the LI tags need a z-index: 1 set, because they have the position:relative attribute

ie6 work on position relative more than absolute
https://stackoverflow.com/a/10280332/1312610