Jump to content

Website is weird when using float in div.

DennisHermannsen
 Share

Recommended Posts

DennisHermannsen Senior Member

DennisHermannsen

Posted
Posted

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:

syOfY4q.png

 

The code for the footer is this:

<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>

Here's the CSS

.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;
}

 

Anyone know how to fix it?

 

EDIT:

Those icons are supposed to be floating right in the blue area called "fill".

0
Link to comment
Share on other sites
wrighty Junior Member

wrighty

Posted
Posted
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:

syOfY4q.png

 

The code for the footer is this:

<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>

Here's the CSS

.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;
}

 

Anyone know how to fix it?

 

EDIT:

Those icons are supposed to be floating right in the blue area called "fill".

</head>

<body>

{if $pagetitle eq $LANG.carttitle}</div>{/if}

   </div>

</div>


<div class="footerdivider">
   <div class="fill">
  </div>
<div class="footer">
<div class="socialicons">
       <a href="http://Twitter.com/GameDeskNet"><img src="http://game-desk.net/templates/gamedesk2013/images/twitter.png" width="50px" height="50px"/></a>
       <a href="http://Facebook.com/GameDeskNet"><img src="http://game-desk.net/templates/gamedesk2013/images/facebook.png" width="50px" height="50px"/></a>
   </div>
<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>
</body>

css

.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;
padding-left:5px;
}

0
Link to comment
Share on other sites
bear Senior Member

bear

Posted
Posted

Generally when I have an issue like this, I open the page using Firefox and the Firebug plugin. This allows me to move things around, see what's inside what, and troubleshoot live on the page. If you could try that, or if you can provide the page link, maybe this will help.

0
Link to comment
Share on other sites
bear Senior Member

bear

Posted
Posted
Those icons are supposed to be floating right in the blue area called "fill".

 

From your first example, add this last line in your original code and see if that helps:

<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>

<br clear="right">

0
Link to comment
Share on other sites
bear Senior Member

bear

Posted
Posted
But why is it necessary to use that? It works on some other sites that I've been messing with, and also on our old template...

 

The link for the template is http://game-desk.net/?systpl=gamedesk2013

 

That exists on that link also.

<div class="footerdivider">

<div class="fill">

<div class="footer-text2">

<div class="footer-text2-right">

<br clear="right">

<div align="right">

</div>

<div class="footer">

div class="footer-text2-right" contains the logos and has a break just after it.

It's necessary to include the break so the browser knows to move any content past the end of that div, expanding to include the content within it. It's just one of the things that make using CSS for layout a bit more tricky than tables had been, but at the same time allows for so much more flexibility.

0
Link to comment
Share on other sites
And then there was one les Senior Member

And then there was one les

Posted
Posted

It isn't required, search for clearfix in google you will find some good examples on how to repair blocks that floats break without adding extra markup.

 

You can position it better using absolute positioning and z-index.

 

 

Different browsers handle CSS differently, you should create pages that work in the top browsers.

0
Link to comment
Share on other sites
And then there was one les Senior Member

And then there was one les

Posted
Posted

there is no extra markup with it, its simply a css class added to any element that needs it. that can be re-used as many times as you need it. there are several options available, some of them use an invisible period to be dynamically put after the content, others do it with just a white space, which is my preferred method because it breaks down cleanly in unsupporting browsers.

 

These two methods are considered to be bad practice anyway.

.clearboth {clear:both;}

<div>
<div class="floated"></div>
</div>

<!-- With one of these ->
<br class="clearboth" />

<br style="clear:both;" />

 

A better approach as i said is using clearfix or one of the variations of which there are many and your markup will look like this.

<div class="clearfix">
<div class="floated"></div>
</div>

As you can see, no need for extra markup to clear the float(s), the parent container can do it perfectly well with the right css information. Hopefully in time this will be resolved, Its long been an issue and im actually very surprised that this has not been addressed in CSS3 but who knows, maybe they dont deem it a problem when there are work arounds. To be fair i think work arounds/hacks should be addressed but i guess they dont.

0
Link to comment
Share on other sites
And then there was one les Senior Member

And then there was one les

Posted
Posted (edited)
How is this

<div class="clearfix">

Less markup than this:

<br clear="all">

 

Yours, in fact, has an additional line that follows, to close that containing div. ;)

 

If you really want to dispute markup size.

 

<div class="f">

 

so lets look at that.

 

class="f" (10 chars including the space)

 

<br clear="all"> (16 chars)

 

Now lets assume the div has a class already doing something else, many do, So what i have to add is 2 characters to the line and i have fixed the problem, you still have to add 16 chars to do the same job.

 

Sorry but you are arguing a point to suggest that applying a recognised bad practice is better than applying an accepted method using CSS? Seems somewhat strange to me.

 

If you set up your class to clearfix in your css, then you only need the class name from that point forward, No matter where or how many times you use it, could be many times in a single page right?

 

I would rather see a code with class than see a code with bad mark up. That's my personal preference of course. I guess it just comes down to what you prefer yourself. One can lead a horse to water as the saying goes :)

 

That slash wasnt to close the div it was to close the open breakline, it was my mistake, its from strict where tags have to be closed properly but yes it is perfectly acceptible when not using strict to leave certain tags open, the browser understands both.

 

If you were referring to my </div> line, That should be in his code anyway and if it isnt then thats why he has a broken layout.

Edited by CDJ Hosting
0
Link to comment
Share on other sites
bear Senior Member

bear

Posted
Posted
One can lead a horse to water as the saying goes

You appear to have missed the point entirely, but I have a saying to quote also:

"There is more than one way to skin a cat" :)

 

You added an entire div around the offending div.

I added a simple break with a clear.

Both do the job.

 

Both add about the same amount of "extra markup", so this is inaccurate, which I pointed out:

without adding extra markup.

We both added markup. Without nitpicking about which is more acceptable to you, or which is shorter by how many characters, we both added markup that does about the same job. Peace. ;)

0
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated

  I accept