We Keep Coding

Fit 4 divs inside each 2 divs which are aligned left and right

I'm developing a little application using Angular 2 for somebody whose doing an experiment, and so I'm trying to fit 4 divs, each containing an image, into each 2 divs.
For some reason, all the divs (containing the images) are aligned one above the other, instead of one next to each other and only going down one row in case of wrapping. I'm expecting the guesser and describer divs to fit in the designated area: guesser left of the vertical divider and describer right to the vertical divider, and both above the horizontal divider, but they don't seem to fill the width of the area, and overflow vertically past the horizontal divider.
How the website currently looks
What I'm expecting the website to look (I edited this using Paint, it's just for illustration)
And this is my component's HTML and CSS:
div.describer {
text-align: center;
float: right;
width: 50%;
height: 80%;
}
div.describer div.container {
margin: 1em;
}
div.describer div.container img.blocked {
padding: 5px;
border: 5px solid blue;
}
div.describer div.container img.target {
padding: 5px;
border: 5px solid red;
}
div.guesser {
text-align: center;
float: left;
width: 50%;
height: 80%;
}
div.guesser div.container {
margin: 1em;
}
div.guesser div.container.blocked {
background-color: black;
display: inline-block;
}
div.guesser div.container.blocked img.blocked {
opacity: 0;
}
div.guesser div.container img.selected {
padding: 5px;
border: 5px solid red;
border-radius: 3;
}
div.vertical-divider {
position: absolute;
left: 50%;
top: 10%;
bottom: 20%;
border-left: 1px solid gray;
}
hr.horizontal-divider {
position: absolute;
left: 5%;
right: 5%;
bottom: 19%;
}
div.commands-container {
position: fixed;
left: 50%;
bottom: 10%;
transform: translate(-50%, 0%);
}
<div class="describer">
<h3>Describer</h3>
<div class="container" *ngFor="let icon of icons">
<img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, target: icon == targetIcon}">
<p *ngIf="icon == blockedIcon">Blocked</p>
<p *ngIf="icon == targetIcon">Target</p>
</div>
</div>
<div class="vertical-divider"></div>
<div class="guesser">
<h3>Guesser</h3>
<div class="container" *ngFor="let icon of icons" [ngClass]="{blocked: icon == blockedIcon}">
<img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, selected: icon == selectedIcon}">
</div>
</div>
<hr class="horizontal-divider">
<div class="commands-container">
<button (click)="startExperiment()" [disabled]="started">Start experiment</button>
<button (click)="getNextSet()" [disabled]="!started">Next set</button>
</div>
I searched for solutions on Stack Overflow and tried implementing what I found but for some reason it didn't help.

If you want the elements side by side, you should use style "display: inline-block".
And you can try wrap the content with a div and put a border layout at bottom like this:
UPDATE
Wrap the containers in a div with style display: grid; grid-template-columns: 50% 50%;
div.describer {
text-align: center;
float: right;
width: 50%;
height: 80%;
}
div.describer div.container {
margin: 1em;
}
div.describer div.container img.blocked {
padding: 5px;
border: 5px solid blue;
}
div.describer div.container img.target {
padding: 5px;
border: 5px solid red;
}
div.guesser {
text-align: center;
float: left;
width: 50%;
height: 80%;
}
div.guesser div.container {
margin: 1em;
}
div.guesser div.container.blocked {
background-color: black;
display: inline-block;
}
div.guesser div.container.blocked img.blocked {
opacity: 0;
}
div.guesser div.container img.selected {
padding: 5px;
border: 5px solid red;
border-radius: 3;
}
div.vertical-divider {
position: absolute;
left: 50%;
top: 10%;
bottom: 20%;
border-left: 1px solid gray;
}
hr.horizontal-divider {
position: absolute;
left: 5%;
right: 5%;
bottom: 19%;
}
div.commands-container {
position: fixed;
left: 50%;
bottom: 10%;
transform: translate(-50%, 0%);
}
div.div-main {
border-bottom-style: solid;
overflow: auto;
}
div.grid-containers {
display: grid;
grid-template-columns: 50% 50%;
}
<div class="describer">
<h3>Describer</h3>
<div class="grid-containers">
<div class="container" *ngFor="let icon of icons">
<img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, target: icon == targetIcon}">
<p *ngIf="icon == blockedIcon">Blocked</p>
<p *ngIf="icon == targetIcon">Target</p>
</div>
</div>
</div>
<div class="vertical-divider"></div>
<div class="guesser">
<h3>Guesser</h3>
<div class="grid-containers">
<div class="container" [ngClass]="{blocked: icon == blockedIcon}">
<img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, selected: icon == selectedIcon}">
</div>
</div>
</div>
</div>
<div class="commands-container">
<button (click)="startExperiment()" [disabled]="started">Start experiment</button>
<button (click)="getNextSet()" [disabled]="!started">Next set</button>
</div>

Inline divs are not lining up in a row

It's my understanding that simply adding display:inline to divs with a relative position will line them up (left to right), somewhat like float:left. I've tried both approaches but they haven't worked.
Below is an example of my last attempt, using inline displaying. I want all three segments to line up from left to right, but they're displaying just like unstyled divs.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
}
.miniBioSegment {
display: inline;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>

You should use inline-block instead of inline for more control. I used a width of 33%-2px because the browser rounds the div's size up therefore leading to overflowing. Your 5px margins weren't helping with the sum either.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
display:inline-block;
}
.miniBioSegment{
display: inline-block;
width: calc(33% - 2px);
vertical-align:middle;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>

CSS should target the ID's and use float:left. See example
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
float:left;
max-width: 33%;
height: 100px;
}
#miniBio {
float:left;
margin-right: 5px;
width: 33%;
}
#miniQuote {
float:left;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>

I'm asking myself, why do you have position:absolute;?
To make it work, I have just added display: flex; justify-content: space-between; to the .profileclass.
Remove the position, and try adding the last two lines.
See example here: http://sandbox.clickadelic.de/demos/lineup.html

With the divs set to display: inline; they will only line up horizontally if the total length of the divs does not exceed the container's width.
And width, height of inline elements is ignored, you should use display: inline-block; instead. The wrapping behavior is the same as above.
Also browser renders whitespace among inline* elements, which is about 4px, see How to remove the space between inline-block elements? for more details.
In your example, there are 3 divs, if you want them to be equal width, you can do:
.profile {
font-size: 0; /*remove whitespace*/
background: silver;
}
.miniBioSegment {
font-size: 16px; /*reset font-size*/
display: inline-block;
vertical-align: top; /*vertical alignment*/
width: 33.3333%;
}
However, the image object in the first div is set to 100px, I think you would prefer that div to be the same width too, and each one takes 50% of the rest space for other two divs. Examples:
1. Inline block
jsFiddle
.profile {
font-size: 0;
background: silver;
}
.miniBioSegment {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
2. Float
jsFiddle
.profile {
background: silver;
}
.profile:after {
content: "";
display: table;
clear: both;
}
.miniBioSegment {
float: left;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
3. CSS table
jsFiddle
.profile {
background: silver;
display: table;
border-collapse: collapse;
width: 100%;
}
.miniBioSegment {
display: table-cell;
vertical-align: top;
border: 1px dotted red;
}
#miniBio, #miniQuote {
width: 50%;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
4. Flexbox
jsFiddle
.profile {
background: silver;
display: flex;
}
.miniBioSegment {
border: 1px dotted red;
}
#miniBio, #miniQuote {
flex: 1;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}

Toggle Class while removing class from siblings

I have a map where I am toggling a class when you click on a dot/location that pops up a tooltip. The issue I'm running into is that when I click on another dot the other siblings tooltips are not going away. I tried to solve this by removing the class of the siblings on click, but when I do this the toggle stops working and I cannot click the dot again to get rid of the active tooltip.
I need the toggle on the currently active tooltip to still work but I also need the sibling tooltips to disappear as well.
I hope I explained that right. Here is a codepen: http://codepen.io/anon/pen/BzQrLV
$('.dot').click(function() {
$('div.toggle-active').removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

Add .not($(this).next()) to your removeClass statement so you don't remove the active class from all the dots, just the dots not being clicked on.
$('.dot').click(function() {
$('div.toggle-active').not($(this).next()).removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
HTML
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

Updated to check whether the tooltip was already being displayed before displaying it.
$('.dot').click(function() {
var displayed = $(this).next().attr('class').match('toggle-active');
$('div.toggle-active').removeClass('toggle-active');
if(!displayed){
$(this).next().toggleClass('toggle-active');
}
});

How to use :hover to show another box next to it's parent

<style type = "text/css">
.privacycheck2:hover {
background-color: #E60000;
width: 100px;
left: 860px;
position: relative;
}
.privacycheck2 {
position: relative;
top: 225px;
left: 852px;
font-family: Helvetica Neue;
font-size: 19px;
color: white;
}
.privacycheck1 {
position: relative;
top: 265px;
background-color: #E60000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
</style>
<body>
<div class = "privacycheck2:hover">This information is private</div>
<div class = "privacycheck1"></div>
<div class = "privacycheck2">i</div>
</body>
How do I make so if you hover over privacycheck1, it will show a box next to privacycheck1 that says "This information is private"
The code I wrote also makes it when you hover over privacycheck1, it would make privacycheck2 (the "I") would move and I don't want that to happen.

If I understand your question correctly, you could do something like this, although you would have to rewrite your HTML.
.privacycheck1 {
position: relative;
background-color: #E60000;
width: 24px;
height: 24px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
content: 'i';
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
}
<div class="privacycheck1"></div>

If you are using Boot Strap, you can use built in functionality of tool-tip.
Otherwise
Try this :
<body>
<style type = "text/css">
.privacycheck1 {
position: relative;
top: 265px;
background-color: #E60000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.hoverEle {
display:none;
}
.privacycheck1:hover .hoverEle {
display:block;
margin-left: 50px;
}
</style>
<div class = "privacycheck1">
<div class="hoverEle">This information is private</div>
</div>
<body>

You can mix up CSS and javascript to do this.
<html>
<style type = "text/css">
.privacycheck1 {
top: 265px;
background-color: #E60000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
/// set display none
display:none;
}
#privacycheck2_hover{
position: absolute;
margin-left:30px;
display:none; // initially set its display to none
}
</style>
<body>
<div id = 'privacycheck2_hover'>This information is private</div>
<div class = "privacycheck1" onMouseOver="showOn()" onMouseOut="showOff()"></div>
<script>
// when mouse out set css display mode to block
function showOn(){
document.getElementById("privacycheck2_hover").style.display = 'block';
}
// when mouse over set css display mode off
function showOff(){
document.getElementById("privacycheck2_hover").style.display = 'none';
}
</script>
</body>
</html>

Absolute Positioned DIVs are not visible

I have two DIVs (previous-image and next-image) that are absolutely positioned. Here is my structure:
<div id="sheet" onclick="close()">
<div id="popover">
<div id="previous-image" onclick="previous()">«</div>
<img src="http://cynthiawoodyardlandscapedesign.com/watermark.php?src=images/main1.jpg&x=0&y=470&opacity=50" id="popover-image" />
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Link: http://cynthiawoodyardlandscapedesign.com/
Here is my CSS:
#next-image {
position: absolute;
right: -100px;
top: 250px;
text-align: center;
line-height: 50px;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
z-index: 200;
background: transparent;
color: white;
}
#previous-image {
position: absolute;
left: -100px;
top: 250px;
text-align: center;
line-height: 50px;
z-index: 200;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
background: transparent;
color: white;
}
My JavaScript:
$("#sheet").click(function() {
$("#sheet").animate({
opacity: 0
}, 200, function() {
$("#sheet").hide();
});
});

Edit
Seems you had omitted the actual HTML of your #sheet element, which has a display: none set on the element, and therefore all is invisible inside the sheet element, including the arrows.
Your actual HTML on your site is:
<div id="sheet" onclick="close()" style="display: none;">
<div id="popover" onclick="close()">
<div id="previous-image" onclick="previous()">«</div>
<img src="watermark.php?src=images/main1.jpg&x=0&y=420&opactity=50"
id="popover-image" onclick="close()">
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Removing that style="display: none;" will show the arrows again.