Mozilla, divs take whole row?

Question

I have a floated object on the right and a div on the left. The div has a colored background and in IE, the background stops where the floated object is, but in Mozilla, the background goes behind the floated object too (not the text, but the background and borders). I don't want this behavior. Any tips for stopping it short of using tables or setting a fixed width?

No luck so far. The text wraps correctly stopping just to the left of the floated object, but a background or border goes all the way behind the floated element. I suppose I'll have to hack it and use tables instead.

If I add a width value, the text won't flow around the object correctly. There must be another answer.

Answer 1

Without seeing your layout and knowing exactly what you want to do, giving you answer here will be difficult. But, try this:

- set the margin on both divs to 0
- set the widths on both divs to a percent value such that both div widths = 99% (e.g. rightdiv {width: 19%;} leftdiv {width: 80%;})
- set float: right on the the div on the left as well.

Mozilla is correctly rendering the divs - if you don't want a div's width to be 100% of its container, you MUST specify its width.

My answer probably isn't the specific solution you're looking for, so let me suggest this site for further info on CSS layouts: http://www.glish.com/css/ . It has many layout techniques you can try: 2, 3, 4 columns; fluid or static; etc. It sounds like you might want to look into a *2 COLUMN FLUID* or *2 COLUMN ALA STYLE* layout. Good luck!

Answer 2

Internet Explorer is notorious for its different definition of "the box model" in CSS styling. If you're interested in the painful details, see a discussion in Cascading Style Sheets: The Definitive Guide by Eric A. Meyer. (Any training or using CSS coder should have this book as a steady reference!)