Problem with display:inline-block footer following a float:right div

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • seegoon
    New Member
    • Oct 2009
    • 31

    Problem with display:inline-block footer following a float:right div

    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:

    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;
    }
    and the html:

    Code:
    <div id="wrap">
    	<div id="continue">
    		<p><a href="/somewhere/">You stay in control. Always.</a></p>
    	</div>
    	
    <div id="footer">
    	<ul>
    		<li>&copy; 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>
    I hope this gives you an idea of the problem.
  • MusoFreak200
    New Member
    • Oct 2009
    • 96

    #2
    i will need a link if you have one...

    Comment

    • seegoon
      New Member
      • Oct 2009
      • 31

      #3
      Actually guys, don't worry. I've solved it. Just added an empty div with the property clear:both and a height attribute. My footer's an include, so it works across the entire site. It would've been nice to have solved it using pure css and no extra elements, but such is life.

      Comment

      Working...