Formatting Images // HTML - html

Question

Right now, at the NLCC at Brown University, my mentor and I are trying to include images at the bottom of the psiTurk Stroop task; we are working with the Dev Branch of the project.
Our goal is to make a row of three images display like the following:
http://i.stack.imgur.com/4IjNG.png
Except with a red and green box displayed on the right and left boxes.
However, when I've tried to include the code so that boxes would be displayed on the bottom of the test.html page this is what is appeared in my browser.
http://i.stack.imgur.com/LKGfk.png
The code I'm trying to use is the following:
h1>Test Phase</h1>
<div id="instructions">What color is this word?</div>
<div id="stim"></div>
<div id="query"></div>
<p id="PDisplay"> </p>
<p id="TDisplay"> </p>
<p id="RDisplay"> </p>
<div style = "position: absolute;
left:50;"><img id="Lred" src="static/images/red.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:50;"><img id="Lblank" src="static/images/blank.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:50;"><img id="Lgreen" src="static/images/green.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:370;"><img id="Ccue" src="static/images/cue.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:370;"><img id="Cblank" src="static/images/blank.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:370;"><img id="Ctarget" src="static/images/target.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:690;"><img id="Rred" src="static/images/red.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:690;"><img id="Rblank" src="static/images/blank.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:690;"><img id="Rgreen" src="static/images/green.jpg" IMG HEIGHT = 150/></div>
I think that there may be an element pushing over the images to only be displayed in the left corner. To try to fix the problem, I tried manipulating the css for the page, but I got to the point where I deleted the entire sheet except the CSS for the body and all of the images were still being displayed on the left. Just in case, here is what the css looks like:
#import url(http://fonts.googleapis.com/css?family=Crimson+Text:400,600italic);
body {
/* background: #999; */
background: black; /* #808090; */
color: white;
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
margin: 0 auto;
margin-top: 100px;
width: 800px;
}
h1 {
font-family: "Crimson Text";
font-size: 42pt;
font-style: italic;
}
a {
color: #FFCC90;
}
.warm {
color: #DDAA90;
}
.cool {
color: #ccccff;
}
strong {
font-weight: bold;
color: #DDAA90;
}
/* Instructions */
#main {
margin: 0 auto;
width: 800px;
font-size: 100%;
}
.continue {
font-size: 2em;
width: 5em;
height: 2.5em;
margin: 20px 20px;
}
.instruct p {
text-align: justify;
}
.instruct .prompt {
text-align: center;
font-style: italic;
font-size: 100%;
margin: 0 auto;
margin-top: 30px;
width: 500px;
}
/* Questionnaire */
input {
width: 200px;
height: 50px;
font-size: 22pt;
}
.questionnaire {
text-align: center;
}
.questionnaire .continue {
margin: 0 auto;
margin-top: 20px;
}
.questionnaire h1 {
text-align: center;
}
.questionnaire p {
text-align: left;
}
.questionnaire #warning {
color: red;
font-weight: bold;
}
.questionnaire table {
margin: 0 auto;
/* Border stuff: */
table-layout: fixed;
border-collapse: separate;
border-spacing: 0.25em;
border: none;
}
.questionnaire tr {
display: block;
border-bottom: 1px dashed white;
}
.questionnaire tr:last-child { border: 0; }
.questionnaire td {
padding-right: 0.25em;
vertical-align: middle;
border-width: 0 1px;
border: none
margin: 20px;
padding-bottom: 10px;
}
.questionnaire td:first-child, td + td {border-left: 0; }
.questionnaire td:last-child { padding-right: 0; border-right: 0; }
.answer {
text-align: left;
padding-left: 3em;
}
.questionnaire .questiontext {
vertical-align: top;
width: 300px;
margin: 20px;
font-size: 1.2em;
}
.questiontext em {
font-size: 70%;
}
.questionnaire textarea {
width: 320px;
height: 130px;
}
.questionnaire form {
text-align: right;
}
.questionnaire ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.questiontext {
text-align: right;
}
/* Debriefing form */
#debriefing {
width: 640px;
margin: 0 auto;
}
#debriefingtext {
margin: 0 auto;
padding: 10px 20px;
font-size: 90%;
text-align: justify;
}
#affirmationbox {
position: relative;
margin: 0 auto;
border: 1px dotted white;
padding: 10px 20px;
vertical-align: middle;
}
#affirmationbox p {
text-align: left;
font-style: italic;
}
#affirmationbox table {
border-spacing: 20px;
}
#affirmationbox td {
vertical-align: middle;
font-size: 100%;
color: black;
height: 50px;
cursor: pointer;
}
#affirmative {
background: white;
overflow: hidden;
font-weight: bold;
width: 10em;
}
#negative {
background: white;
font-size: 100%;
width: 25em;
}
I was wondering if there is another element in an HTML or some other attribute of the code that is limiting the placement of the images.

Answer 1

Why don't you just float the elements to the left instead of using position absolute
Try
<div style="float:left;">
instead of <div style = "position: absolute;left:50;">

Answer 2

Rather than having a <div> for each <img> tag, use one <div> for each row and change the positioning to inline-block.
For example, rather than having this:
<div style = "position: absolute;left:50;">
<img id="Lred" src="static/images/red.jpg" IMG HEIGHT = 150/>
</div>
<div style = "position: absolute;left:50;">
<img id="Lblank" src="static/images/blank.jpg" IMG HEIGHT = 150/>
</div>
<div style = "position: absolute;left:50;">
<img id="Lgreen" src="static/images/green.jpg" IMG HEIGHT = 150/>
</div>
Do this:
<div style = "position:inline-block;left:50;">
<img id="Lred" src="static/images/red.jpg" IMG HEIGHT = 150/>
<img id="Lblank" src="static/images/blank.jpg" IMG HEIGHT = 150/>
<img id="Lgreen" src="static/images/green.jpg" IMG HEIGHT = 150/>
</div>
Notice how I changed position:absolute to position:inline-block as well as encased all three images into one <div> element, instead of three total <div> elements.
UPDATE
This will create a 3x3 grid of images on the page if you duplicate the code to all 9 images. If you are looking to make a 3x1 grid where the three sets of images "stack" on top of each other, then leave the position:absolute; as-is. This would be best if you are dynamically hiding/showing a series of three images and want them to appear in the same place.