Hi, I have been changing my homepage around and have hit a problem with aligning objects. My html code is as follows
<div id="containerBox3">
<a href="[~613~]" Hunting/><img src="assets/images/Huntinghomepagetitle.jpg" alt="hunting"/></a>
<a href="[~613~]"/><img src="assets/images/Huntinghomepage.jpg" alt="hunting image"/>
</div>
<div id="containerBox4">
<a href="[~735~]"/><img src="assets/images/Mutationshomepagetitle.jpg" alt="mutations"/></a>
<a href="[~735~]"/><img src="assets/images/Mutationshomepage.jpg" alt="mutations image"/>
</div>
<div id="containerBox5">
<a href="[~617~]"/><img src="assets/images/Searchhomepagetitle.jpg" alt="a-z search"/></a>
<a href="[~617~]"/><img src="assets/images/Searchhomepage.jpg" alt="a-z search image"/></a>
</div>
<div id="containerBox6">
<a href="[~639~]"/><img src="assets/images/Hybridhomepagetitle.jpg" alt="hybrids"/></a>
<a href="[~639~]"/><img src="assets/images/Hybridhomepage.jpg" alt="hybrids image"/></a>
</div>
<div id="ContainerBox7">
<a href="[~764~]"/><img src="assets/images/Latesthomepagetitle.jpg" alt="latest"/></a>
<a href="[~764~]"/><img src="assets/images/Latesthomepage.jpg" alt="latest image"/></a>
</div>
<div id="ContainerBox8">
<a href="[~794~]"/><img src="assets/images/Quickidhomepagetitle.jpg" alt="quick id"/></a>
<a href="[~794~]"/><img src="assets/images/Quickidhomepage.jpg" alt="quick id image"/></a>
</div>
Box 3 is left justified, 4 is right, 5 appears under 3, 6 under 4, but 7 and 8 are misaligned. The Css is as follows:
#containerBox3 {
width: 320px;
border: 2px solid #ffdc87;
text-align: left;
color: #000000;
float:left;
padding-left: 40px;
}
#containerBox4 {
width: 320px;
border: 2px solid #ffdc87;
text-align: left;
color: #000000;
float:right;
padding-right: 40px;
}
#containerBox5 {
width: 320px;
border: 2px solid #ffdc87;
text-align: left;
color: #000000;
float:left;
padding-left: 40px;
}
#containerBox6 {
width: 320px;
border: 2px solid #ffdc87;
text-align: left;
color: #000000;
float:right;
padding-right: 40px;
}
#containerBox7 {
width: 320px;
border: 2px solid #ffdc87;
text-align: left;
color: #000000;
float:left;
padding-left: 40px;
}
#containerBox8 {
width: 320px;
border: 2px solid #ffdc87;
text-align: left;
color: #000000;
float:right;
padding-right: 40px;
}
As is clear in the CSS, the values are all the same, but yet containerbox 7 and 8 will not align properly. Here is the offending page:
www.pawsforwildlife.co.uk
Any help appreciated, thank you in advance
☆ A M B ☆