Firstly, hello!
OK, now my 'introduction' is over, I want to display two images, one after another (vertically), but not on top of each other, so to speak. With the first (and upper) image, I float it to the right. When I try and get the second (lower) image to show below the first image, but to the left, it doesn't. It simply appears level with the first image but to the left.
How do I solve this?div.imgcontainer {
width: 250px;
background-color: #000;
margin-left: auto;
margin-right: auto;
}
div.float {
float: left;
text-align: center;
vertical-align: middle;
width:250px;
height: 188px;
padding: 10px;
}
div.float p {
text-align: center;
}
div.spacer {
clear: both;
}
<div class="imgcontainer">
<div class="spacer">
& nbsp;
</div>
<div class="float">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic1.jpg"
alt="alt text 1" /><br />
<p>caption 1</p>
</div>
<div class="float">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic2.jpg"
alt="alt text 2" /><br />
<p>caption 2</p>
</div>
<div class="spacer">
& nbsp;
</div>
</div>I should have said that there is an easier way (just put a div around the images that is too small for both pics to fit into) but this was will allow you to stack two on two or three on three, etc.
Kinda like if you used a table (but more fluid).
OK, now my 'introduction' is over, I want to display two images, one after another (vertically), but not on top of each other, so to speak. With the first (and upper) image, I float it to the right. When I try and get the second (lower) image to show below the first image, but to the left, it doesn't. It simply appears level with the first image but to the left.
How do I solve this?div.imgcontainer {
width: 250px;
background-color: #000;
margin-left: auto;
margin-right: auto;
}
div.float {
float: left;
text-align: center;
vertical-align: middle;
width:250px;
height: 188px;
padding: 10px;
}
div.float p {
text-align: center;
}
div.spacer {
clear: both;
}
<div class="imgcontainer">
<div class="spacer">
& nbsp;
</div>
<div class="float">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic1.jpg"
alt="alt text 1" /><br />
<p>caption 1</p>
</div>
<div class="float">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic2.jpg"
alt="alt text 2" /><br />
<p>caption 2</p>
</div>
<div class="spacer">
& nbsp;
</div>
</div>I should have said that there is an easier way (just put a div around the images that is too small for both pics to fit into) but this was will allow you to stack two on two or three on three, etc.
Kinda like if you used a table (but more fluid).