I'm currently working on a small project using Angular 2 for an experiment, where I need to place 4 divs, each containing an image, within 2 divs.
However, all the divs (with images) are stacked vertically instead of being placed next to each other, and wrapping to the next row when needed. I am expecting the 'guesser' and 'describer' divs to align as follows: 'guesser' to the left of the vertical divider and 'describer' to the right of the vertical divider, both above the horizontal divider. Unfortunately, they do not occupy the designated area and overflow vertically beyond the horizontal divider.
This is how the website currently appears:
Here's how I envision the website to look (I modified this using Paint, purely for demonstration)
Below is the HTML and CSS for my component:
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>Despite researching possible solutions on Stack Overflow and attempting to implement them, I haven't been able to resolve the issue.