Hi, forum.
I've been having a problem lately. Whenever we try to use a float in a div, the div messes the position up. See this for an example:
![]()
The code for the footer is this:
Here's the CSS
Anyone know how to fix it?
EDIT:
Those icons are supposed to be floating right in the blue area called "fill".
I've been having a problem lately. Whenever we try to use a float in a div, the div messes the position up. See this for an example:
The code for the footer is this:
Code:
<link href="whmcs.css" rel="stylesheet" type="text/css" />
{if $pagetitle eq $LANG.carttitle}</div>{/if}
</div>
</div>
<div class="footerdivider">
<div class="fill">
<div class="socialicons">
<a href="http://Twitter.com/GameDeskNet"><img src="http://game-desk.net/templates/gamedesk2013/images/twitter.png"/></a>
<a href="http://Facebook.com/GameDeskNet"><img src="http://game-desk.net/templates/gamedesk2013/images/facebook.png"/></a>
</div>
</div>
<div class="footer">
<div class="footer-text">
<div id="copyright">{$LANG.copyright} © {$date_year} {$companyname}. {$LANG.allrightsreserved}.</div>
{if $langchange}<div id="languagechooser">{$setlanguage}</div>{/if}
<div class="clear"></div>
{$footeroutput}
</div>
</div>
</div>Code:
.footerdivider {
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
background-color: #03152b;
background-repeat: repeat-x;
-o-border-radius: 2px;
color:#fff;
}
.footerdivider #languagefrm select {
margin: 0 0 0 5px;
padding: 4px;
font-family: Tahoma;
font-size: 11px;
color: #000000;
height: 25px;
line-height: 25px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
float: middle;
}
.footerdivider #copyright {
float: right;
color: #fff;
}
.fill{
color:white;
padding: 10px 0px 2px 7px;
min-height:20px;
width:960px;
height:100%;
margin-left:auto;
margin-right:auto;
}
.footer{
margin: 0 auto;
padding: 0;
width: 100%;
height:50px;
background-color: #000;
background-repeat: repeat-x;
color:#fff;
margin-top:auto;
margin-bottom:auto;
}
.footer-text{
width:960px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
padding-top:13px;
}
.socialicons{
float:right;
}EDIT:
Those icons are supposed to be floating right in the blue area called "fill".