Develop Reference

The div position changes when the screen starts to shrink

1- There is a tooltip that opens when hovering the cursor over the icon. But when the screen starts to shrink a little, the div starts to change position. How can I prevent this?
EDIT: It was enough to give the properties to the .installmentinfo__container class margin: auto; and transform: translateX(-250px);
2- I have another question. As you can see in the image below, the tooltip that opens does not open exactly under the icon. I don't want a space between the dropdown tooltip and the icon.
Note: The tooltip that opens should appear at the bottom left of the icon.
EDIT: I fixed problem 2.
The picture I'm talking about;
html
<div className="installmentinfo__container">
{
props.installmentList?.map((e, i) => {
return (
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{e.date}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
);
})
}
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
right: 340px;
background-color: white;
&:last-of-type {
border-bottom: none;
}
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}

it's hard to understand by looking at these code examples.
My guess is because of "right: 340" value. If the "position: relative" doesn't have a parent element, the current element will always shift 340px from the right.
To prevent this, you may need to give "position: relative" to the parent element where the ".installmentinfo__container" is located. After that, you can use "right: 0".

Position div at bottom of containing div

I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.

Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}

Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.

You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}

use position property like position absolute or position relative so as to work with top, left,right,bottom properties

Table getting out of fieldset border in Firefox only

I have a form where i have fieldsets, in 1 fieldset i have a table. This table will be in the fieldset in chrome and IE but not in Firefox. Please have a look:
https://jsfiddle.net/79504g5b/1/
my fieldset has this CSS:
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*----------------------->2*/ position: absolute;
}
I don't know what is the problem.

The element .statusHead1 does not occupy the available width. So, table is added next to it, in the available space.
To move table on it's own line, use clear: both on the table.
table {
clear: both;
}
See Demo.
Optionally, you can also set the float: left to the table.
Demo
I'll recommend you to use clear: both. Using this, you don't have to change your other elements structure/view.

Remove float:left form .statusHead1 class
Check this link https://jsfiddle.net/g0t1rwyw/
.statusHead1{
/*float:left;*/
width: 600px;
font-weight:bold;
border-bottom:1px solid #bfcfdf;
}

Making onclick event toggle display on subsequent clicks?

I have a div followed by a fieldset. I have it such you click the div anywhere and it makes the otherwise display:none fieldset appear. However, I'd like it to disappear on second click, as well. Basically the onclick event would toggle between display:none and display:block.
Here's the fiddle I'm working with: http://jsfiddle.net/zk1j23m5/
function showexpando(id) {
document.getElementById(id).style.display = "block";
}
.greyex {
padding: 15px;
padding-left: 30px;
padding-right: 30px;
border: solid black 3px;
border-top: 0px;
border-radius: 0px 0px 7px 7px;
background-color: #DDDDDD;
display: none;
}
.expando {
background-color: #A971A9;
font-weight: bold;
padding: 5px;
text-align: center;
border: 3px solid black;
border-radius: 7px 7px 0px 0px;
border-bottom: 0px;
cursor: pointer;
}
.expando a {
text-decoration: none;
}
<div class="expando" onclick="showexpando('excred');">
<a>▼ lorem ▼</a>
</div>
<fieldset class="greyex" id="excred">ipsum</fieldset>
Additionally, there's some problem with the border. I'd like the expando div to have border-radius: 7px when the fieldset is hidden, but have border-radius:7px 7px 0px 0px; border-bottom: 0px when the fieldset is visible. Lastly, the border doesn't look right when fieldset is visible: there's like a 1px difference in positioning despite the code being congruent.
How can I accomplish these?
edit; I guess I could query the document if fieldset is display:none and fiddle with the CSS accordingly using JS, but it seems unwieldy and I'm sure there's an easier solution.

You should use unobtrusive JavaScript instead.
I'd suggest toggling a class. For instance:
Updated Example
var expand = document.querySelector('.expando');
expand.addEventListener('click', function () {
this.nextElementSibling.classList.toggle('visible');
});
.greyex {
display: none;
}
.greyex.visible {
display: block;
}
References:
.nextElementSibling (IE9+)
.classList (IE10+)

Noticed no one answered your second part.
If you're looking to get the borders to line-up, just change the fieldset to a div.
Here's the fiddle.
Or, alternatively you can set the margin to the fieldset element to:
margin: 0px 2px 0px 2px;
To match the div.

Div start scrolling when the header reaches its top and stop from scrolling when the its bottom reaches the footer

I have a page called project, in that page there are two grids, one called "imagesGrid" and the other one called "detailsBox", they are floating next to each other using (i.e. both has a width like 50% and display inline-block). I am trying to make the "detailsBox" to start scrolling with the page when the header reaches its top, and stop from scrolling when its bottom reaches the top of the footer. I am also trying to stop the function completely from working and set the "detailsBox" to be positioned as relative when the screen size is below 700px.
I have tried and experimented dozens of tutorials, like:
make div stick to the top of the screen and stop before hitting the footer and http://jsfiddle.net/FDv2J/3/ with no hope.
What is the best path to take to solve my problem? Here is a link to a live preview of the page: http://www.loaidesign.co.uk/portfolio ?project=Test_Project
And here is the HTML and the CSS, I don't have a working JavaScript script, and I tired the ones provided in the links above as well as many others from here, google and codepen, but can't seem to be able to make them work for me.
HTML:
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Website</p>
<img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg">
</div>
<div class="detailsBox">
<h3>Adonis Cars</h3>
<p>It's a luxuries cars rental agency based in Qatar</p>
<p>www.adoniscars.com
</p>
<p><strong>Skills:</strong> Web Design</p>
<p><strong>Date:</strong> 2012</p>
<p class="share icons"><strong>Share This Project On:</strong>
<br> <span>Facebook</span> <span>Twitter</span>
<!--Twitter Popup Script-->
<script type="text/javascript">
function popitup(url) {
newwindow = window.open(url, 'name', 'height=440,width=700');
if (window.focus) {
newwindow.focus();
}
return false;
}
</script>
</p>
<div> Go Back
<a class="scrollup">Scroll Up</a>
</div>
</div>
</div>
</div>
CSS:
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img {
border: 1px solid #EAEAEA;
margin-bottom: 10px;
display: block;
}
.imagesGrid img:last-of-type {
margin-bottom: 0;
}
.imagesGrid p {
border-top: 1px solid #EAEAEA;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
position: fixed;
top: 0;
width: 347px;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #EAEAEA;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p:first-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox a:hover {
color: #5575A6;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a {
background-color: #EAEAEA;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover, .detailsBox div a:active {
color: #FFFFFF;
background-color: #5575A6;
}
.share.icons {
cursor: default;
}
.share.icons a {
vertical-align: middle;
background-color: #F5F5F5;
}
.share strong {
margin-right: 10px;
}
.share br {
display: none;
}
.scrollup {
display: none;
}

You might want to check out StickyFloat
It uses JS to achieve what you want. The problem you have is that you're trying to use CSS to conditionally do something, when really that's not what CSS is for
CSS "Float" VS Javascript
If you want the floated div to remain at a certain position all the time, that's okay. But CSS cannot differentiate between elements on the page. Here's the official spec:
fixed The element is positioned relative to the browser window
The problem is fixed is related to the browser window only, not other elements. JS, on the other hand, uses the DOM to create an array of elements on the page, which you can create conditions for. It'd highly recommend looking at StickyFloat, or the other "sticky" JS plugins :)