Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1083
  • Last Modified:

Issue with CSS Float in Mozilla & Safari

I'm new to CSS.  I had a designer assist me with creating the templates, CSS for the site www.votehealthcare.org.  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.

Jennifer
0
carecorejen
Asked:
carecorejen
1 Solution
 
jasonsbytesCommented:
I don't see any reason to float it...  You just need a 3 column CSS layout with no floating.
0
 
ellandrdCommented:
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:

</div>
</body>

That should do the trick

p.s your site is nice.

ellandrd
0
 
oceanbeachCommented:
Hello carecorejen,

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

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

oceanbeach
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

HTML
------------
http://validator.w3.org/

CSS
------------
http://jigsaw.w3.org/css-validator/


0
 
mreuringCommented:
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.
0
 
mreuringCommented:
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 ;)
0
 
carecorejenAuthor Commented:
I"m still having an issue with print on the home page.  Any suggestions?

Jennifer
0
 
mreuringCommented:
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...
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now