I'm having trouble aligning two labels of text inline under two images. The images are floating to the right, but when I try to float the text as well, it doesn't align properly underneath them.
I attempted to use a separate container for the label text, which did align the text under the images. However, the text was not evenly distributed beneath the two images as expected since they are in their respective containers.
I've tried various solutions but have not been successful so far. The text is within a span in its parent div, and the span #past-label is currently floating right, but not quite where it should be.
Hopefully, someone has a solution to this issue.
<article id="issue-wrapper">
<div id="issue-container">
<h5><span style="color: #ffffff;">First issue</span> Fall 2010</h5>
<h3>Heading</h3>
<h6>Sub Heading</h6>
</div><!----------issue container end---------->
<div id="issues">
<div id="past-cover"><a href="issues/sample-issue.pdf"><img src="image" alt="alt text" /></a>
<span id="past-label">PDF</span>
</div>
<div id="past-cover"><a href="issues/sample-issue.swf"><img src="image" alt="alt text" /></a>
<span id="past-label">FLASH</span>
</div>
<div id="past-cover-mobile"><a href="issues/sample-issue.pdf"><img src="image" alt="alt text" /></a>
<span id="past-label">PDF</span>
</div>
</div><!----------issue covers end---------->
</article><!----------issue wrapper end---------->
<style type="text/css">
#issue-wrapper {
background-color:red;
height:auto;
padding:30px;
display:table;
width:100%;
}
#issue-container {
width:30%;
height:auto;
background-color:gray;
left:0px;
display:table-cell;
vertical-align:middle;
}
#issue-covers {
background-color:orange;
width:auto;
height:auto;
margin:0px;
}
#past-cover img {
float:right;
}
#past-cover-mobile img {
float:right;
display:none;
}
#past-label {
background-color:blue;
margin:0px;
width:auto;
display:inline;
float:right;
}
h5, h3, h6 {
width:100%;
margin:0px;
font-size:2em;
}
</style>