Hi guys.
I have a footer set to display:inline-block so that it'll shrink to fit its contents. It works fine when it follows other block or inline elements, it seems. However, when it follows a div set to float:right, it aligns to the left of that div. Here's the relevant css:
and the html:
I hope this gives you an idea of the problem.
I have a footer set to display:inline-block so that it'll shrink to fit its contents. It works fine when it follows other block or inline elements, it seems. However, when it follows a div set to float:right, it aligns to the left of that div. Here's the relevant css:
Code:
#footer {
clear:both;
padding:0 20px 13px;
background-color:transparent;
border-width:18px 22px 0 20px;
-webkit-border-image:url(images/footer/footer-bg.png) 38% 5% 0% 5%;
-moz-border-image:url(images/footer/footer-bg.png) 38% 4% 0% 4%;
border-image:url(images/footer/footer-bg.png) 38% 5% 0% 5%;
display:inline-block;
margin-top:30px;
}
#continue {
background-color:#c7bfbd;
margin:30px 0;
border-width:0 30px 5px 3px;
-webkit-border-image:url(images/continue-arrow-3.gif) 0% 62% 8% 6%;
-moz-border-image:url(images/continue-arrow-3.gif) 0% 62% 8% 6%;
border-image:url(images/continue-arrow-3.gif) 0% 62% 8% 6%;
float:right;
}
Code:
<div id="wrap"> <div id="continue"> <p><a href="/somewhere/">You stay in control. Always.</a></p> </div> <div id="footer"> <ul> <li>© My website 2010 / </li> <li><a href="/">Home</a> / </li> <li><a href="/contact/">Contact</a> / </li> <li><a href="/legal.php#privacy">Privacy</a> / </li> <li><a href="/legal.php#help">Help</a> / </li> <li><a href="/legal.php#terms-of-use">Terms of use</a> / </li> <li><a href="/sitemap.php">Sitemap</a></li> </ul> </div> </div>
Comment