Issue with CSS Float in Mozilla & Safari

Posted on 2007-08-09
Last Modified: 2013-11-05
I'm new to CSS.  I had a designer assist me with creating the templates, CSS for the site  She used a float to get the right hand column in the appropriate position.  But, when I resize or print in Mozilla or Safari - the float repositions itself below the center column.  How do I solve this?

Thanks for your help.

Question by:carecorejen
    LVL 17

    Expert Comment

    I don't see any reason to float it...  You just need a 3 column CSS layout with no floating.
    LVL 16

    Expert Comment

    Hi Jennifer,

    Floating objects will do this if the screen is resized.  Unless you set the position to absolute and set top and left margins, your floating object will float with the screen and sit itself anywhere it can, even over other objects on the screen.

    I would suggest you wrap the whole page contents in a div with a fixed width so when the screen is resized the inner contents will not reposition themselves.

    so to fix this, place this line after your body tag:

    <body  onload="preloadImages();">
    <div style="width:1000px;margin-left:auto;margin-right:auto;padding:0px;margin-top:0px;margin-bottom:0px;overflow:hidden;">

    Then at the bottom, before your </body> tag, close the wrapper div again:


    That should do the trick

    p.s your site is nice.

    LVL 12

    Expert Comment

    Hello carecorejen,

    Try removing the 'display: table-cell' style from .pageContainer...

          text-align: left;
          background-color: #ffffff;
          color: #000000;
          padding: 0px;
          padding-bottom: 20px;
          width: 993;
          height: 100%;
          margin-top: 10px;
          margin-bottom: 10px;

          /* display: table-cell; */


    I hope this helps!

    LVL 18

    Expert Comment

    There is nothing wrong with floating divs here.

    What is happening is your container elements are re-sizing and when the floated element runs out of space it is starting a new line which is correct behaviour.

    So ... your best bet is to set a min-width on a div that will wrap around your left and right div. That way when the width reaches that size it will not shrink anymore.

    Also, you are using tables and divs? Tables are not really good for layout they are for displaying tabular data. I also noticed you have some CSS and HTML errors. You should validate both here:



    LVL 17

    Expert Comment

    Hmmm, the problem on this page is that you're using a <center> tag to center the page-content. Because that doesn't work, the #pageContainer is then forced to display:table-cell; and without a table-element around it, that table-cell won't be forced to the defined width when there isn't enough space available.

    My question would be, do you want a quick hack to glue this house of cards together, or do you want to spend a little time and effort to build a proper foundation for your page?

    The quickest hack I can think of is adding the following to your css file:
    body {
    text-align: center; /*For quirks IE6 and below*/

    center {
    width: 1000px;
    margin: 0 auto; /*For proper CSS2 browsers*/

    For a more solid foundation, bare with Eternal_Student :) I'm on the wrong timezone to go through a lengthy process of helping you understand what's happening on your page.
    LVL 17

    Accepted Solution

    In retrospect, since you're only have trouble with mozilla and Safari, the quickest hack would be adding the following to your css (instead of what I posted before):
    body > center {
    min-width: 1000px;

    That's all folks ;)

    Author Comment

    I"m still having an issue with print on the home page.  Any suggestions?

    LVL 17

    Expert Comment

    It's probably related to leftColumn, home and rightColumn having a defined height of 100%. I don't see these serving any purpose so you might just give it a go without them...

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now