How to position div below another div with images? - css

Question

I'm fighting two days already with this problem. I want to put div with images at absolute positions, below other div with images. Somehow divs are ignoring images and stack on top of each other.
example code is here: https://jsfiddle.net/6H4RA/10/
So it should display one image in the first row, and two images in the second.
I must be missing something obvious.
Here is the code from JSFiddle:
#banner-left {
position:absolute;
width:100px;
height:100px;
}
#header{
position:relative;
background: #ffa;
}
#footer {
position:relative;
margin-top:0px;
width: 100%;
background: #6cf;
}
<div id="header">
Header
<div id="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
</div>
<div id="footer">
FOOTER
<div id="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
<div id="banner-left" style="top:0px;left:100px;">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
--edit--
I forgot to mention that images must be at absolute positions. That's the catch.

Answer 1

There may be no need to use absolute positioning in this layout design.
Here is how I might approach implementing this.
Note: id's should be unique on a web page, so I changed your #banner-left to a class .banner-left.
.banner-left {
float: left;
margin-right: 20px; /* if needed */
}
.banner-left img {
display: block;
}
#header {
overflow: auto;
background: #ffa;
}
#footer {
overflow: auto;
background: #6cf;
}
<div id="header">
<h1>Header</h1>
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
</div>
<div id="footer">
<h2>Footer</h2>
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>

Answer 2

In you banner width id, add
display: inline-block;

Answer 3

I forgot to mention that images must be at absolute positions. That's the catch.
Marc, your example works great but i have lots of images with absolute position that i want to move depending on website size with a simple container div.

Answer 4

You have a couple of problems with your code.
First, you can't have multiple elements with the same id. This may not cause problems in your small jsfiddle right now, but it can and will come back and bite you in the rear, later on. However, that is easily solved by turning the ids into classes.
The other problem is that there is no more content in the header and footer divs after the text. Yes, there are the absolutely positioned blocks, but they don't count. Absolutely positioned elements don't partake in the page flow. So the header and footer divs don't have a clue about them!
The easiest solution, as possible in your example, is to give those divs a bottom padding of 100px, so that the images appear to be inside them instead of sticking out. (They don't really sit inside them, but they just are displayed in the same place where the parents' padding is.)
.banner-left {
position:absolute;
width:100px;
height:100px;
}
.banner-left img {
width:100px;
height:100px;
}
#header{
position:relative;
background: #ffa;
padding-bottom:100px;
}
#footer {
position:relative;
margin-top:0px;
width: 100%;
background: #6cf;
padding-bottom:100px;
}
<div id="header">
Header
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="g" />
</div>
</div>
<div id="footer">
FOOTER
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="g" />
</div>
<div class="banner-left" style="left:100px;">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="g" />
</div>
If, however, you don't know beforehand what the heights of the images are, you may have to run some Javascript on the images to figure out which one is the highest, or find out a way to avoid the display:absolute.