We Keep Coding

Issue with overflow:hidden/visible toggle on hover. Gif available in post

As you can see above, I cannot select the overflowed events on the calendar date. It looks like it's because I have the overflow:hidden/visible toggle triggering on the class of the calendar date: '#cell-shell'.
Here is the HTML code for that specific date:
<td>
<div id="09" class="cell-shell>
<div class="date-num">9</div>
<div class="event-wrap>
<span></span> <!--these hold edit buttons when editor is logged in-->
<span></span>
<div id="e1" class="cell-data">Event 1</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e2" class="cell-data">Event 2</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e3" class="cell-data">Event 3</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e4" class="cell-data">Event 4</div>
</div>
... <!-- pattern repeats-->
</div>
</td>
Here is my current relevant CSS:
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
}
.cell-shell:hover {
overflow:visible;
}
.event-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.event-wrap:hover {
opacity: .5;
}
Is there any way through CSS or JS that I can prioritize the '#cell-data' elements? I need to be able to click on those events 6 & 7 and beyond, but once my mouse wanders out of the '9' '.cell-shell' box into the '16' '.cell-shell' box, '16' seems to take over.
EDIT: I added more information as requested by david. I thought it was irrelevant but perhaps not. I added the elements as well as the children below them. I also added in the event-wrap CSS

It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.
See the frame below where you're over an event on top of 16 just before you cross the gap:
The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.
I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P
One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.
In order to keep your current visual without having to add too much code, you can do something like the following:
...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...
...where the event-wrapper class looks like:
.event-wrapper {
margin: 0px;
padding: 0px;
}
Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.
Anyway, I hope that helps.

Use z-index to give priority to your cell-data elements over '16'.
Find a sample demo of it's usage below:
https://www.w3schools.com/cssref/pr_pos_z-index.asp

Add CSS property z-index: -1 into your css.
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
z-index: -1 // Here
}
.cell-shell:hover {
overflow:visible;
z-index: -1 //Here
}
Hope it will work for you.

Issue with keeping a div class floating down with the page

I've been trying a few things but cannot get it to work. I have a div in the right column and I want it to float down to a certain point with the page while scrolling.
<div class="stickyDiv">
<div class="section mod-sticky" style="position: fixed; top: 70px;">
<p>Always float with page</p>
</div>
</div>
Is there any easy way to do this with jQuery? Or just css?
made a quick jsfiddle what I want is that as soon as it reaches class contentb it will scroll with the page
https://jsfiddle.net/agwrbjh8/1/
thanks

I am not sure I understood you. Do you mean something like this:
.mod-sticky {
position: fixed;
top: 70px;
border: 1px solid green;
right: 0;
}
<div class="stickyDiv">
<div class="section mod-sticky">
<p>floater</p>
</div>
dasf asd asdf asdf
<p style="height:800px">Lorem... long text</p>
</div>

I would look at the sticky-kit jQuery plugin.
And you would use it as so:
$('.stickyDiv').stick_in_parent({
parent: $('.content'),
offset_top: 70
});
JSFIDDLE DEMO
Had to restructure your HTML so that .stickyDiv is a child of the content div you intend to stick within, and then also added a margin-left to get it to the right of the content area. Might not work for your situation but I don't see how you can get it to stick how you want with your original markup.

How do you move two images to the left and right in a div element?

I am using HTML, and I am trying to make a part of a webpage where I have a textbox in the center of the screen and five images surrounding the textbox.
I am able to place three images above the box, but when I try to place an image to the left and to the right of the textbox, the images seem to be "stuck" in the center of the page. All this is in a div element.

Easiest way to do this is with grid system. In example if you use Bootstrap grid system you can do it like this:
<div class="wrapper">
<div class="row">
<div class="col-md-4"><img src="source" alt="something" ></div>
<div class="col-md-4">Textbox</div>
<div class="col-md-4"><img src="source" alt="something" ></div>
</div>
You can also do it without grid system like Gerasimos answer.

Try using the CSS position property if this doesn't work try entering this code in your style sheet:
#left-image { position: absolute; left: 10px}
#right-image { position: absolute; right: 10px}

width: auto property not being respected with position: relative

I'm currently trying to style a dropdown menu, but I'm running into some issues. The biggest one is that the dropdown elements don't seem to be exceed the size of their parent object when the css for the dropdown is set to relative.
(Had to block out the search results, sorry).
It seems to work on fixed, but only in Firefox, Chrome's dropdowns are all off.
So I think I need one of two solutions:
Fixing the width issue and keeping the position: relative
Fixing the offset issue that occurs ONLY in chrome, and setting the position: fixed attribute.
HTML:
<div id="node">
<div id="nodebar">
<input type="text" id="nodetext" placeholder="Enter a node" name="nodetext" value="">
<div id="img-container">
<img src="styles/magnifyingglass.png" id="img" alt="" />
</div>
</div>
<div id="nodebr"></div>
<div id="noderesults">
<div id="nodetruncated"><span class="truncated">Truncated search results..</span></div>
</div>
</div>
CSS
#searchresults, #noderesults, #roadmapresults, #intersectnoderesults {
max-width: 1000px;
background: #2E3C3F;
width:auto;
height: 0px;
padding: 0;
border: none;
position: relative;
z-index: 3; /*So that the dropdown stays infront of the forms*/
}
Would anyone know how I could go about fixing this?

I ended up just fixing this by breaking down the CSS into one category for each one of the fields, set the position property to fixed, and scaled the css "top" property so that the results would fit for each of the search fields.

Recreating Phone SMS UI with CSS: Absolute Positioning Conversation to Bottom while Maintaining Scroll

Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute...right? Well that makes it so that our scrolling doesn't work. Right now it is anchored to the top, positioned relative, and scrolling does work.
Try clicking the "I said..." button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.
This is the temporary URL:
http://gotinto.com/text/
AND a PERMANENT JS Fiddle URL:
http://jsfiddle.net/Qyn7V/
Here is the simple HTML:
<div class="convoPhone">
<div class="phoneDisplay">
<div class="convoCont">
<div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>
Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!

Have you tried position: fixed? Observing your link, as a proof of concept, something like this should do:
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
Edit:
Put three place holder conversations as place holders with visibility: hidden (this ensures they occupy space).
<div class="convoCont">
<div class="actualConvo" style="">
<div class="invisibleFirst">
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
</div>
</div>
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
<div class="isaid textLine">I said...</div>
<div class="tsaid textLine">They said...</div>
</div>
<br class="clear">
</div>
Then for each of the first 3 real entries, remove one of the place holders. If you want more precision, you can replicate the same place holder effect with padding-top on actualConvo. Just reduce the padding-top by a fixed value until it bottoms out at 0. If you want to make the buttons scrollable, just removed the styling and apply the padding-top at a higher DOM level.

I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!
var contH = $('.phoneDisplay').css('height');
if($('.convoCont').css('height') < contH) {
$('.convoCont').css('height',contH);
}