there is a loyout, a rectangle which have three images in a row on the above and at the right rectangle corner,there is a text. the following is my HTML structure
HTML Code:
<div id="content">
<ul id="picture">
<li><img src="#" /><h5>first picture</h5></li>
<li><img src="#" /><h5>second picture</h5></li>
<li><img src="#" /><h5>third picture</h5></li>
</ul>
<div class="clear"></div>
<p id="join">join us</p>
</div>
the css code
Code:
#picture{
margin-left:10px;
margin-top:50px;
}
#picture li {
text-align:center;
margin-left:10px;
width:150px;
float:left;
border-left:#D3DAEC solid 1px;
border-right:#D3DAEC solid 1px;
}
.clear {
clear:both;
}
#join {
text-align:right;
background: url(images/1.gif) no-repeat scroll 0 0;
}
the wierd thing is under firefox, the "join us" is out of the content div. but under IE7 ,it's ok. why under firefox,it can't work.
is there a better HTML structure to get i want to?