div float problem

background invasion from other divs

[mongoloid001]

Hi, I have a div

float:right

with

width:20em

. On the left side, I have the main div. Everything looks fine until I added background-color for the

div#main h4

. Somehow the background color extended all the way to the right of the screen and messed up the floating div.

Any idea on how to limit the background to the border of a floating div?

Thanks

-Mongo

[isitreal]

No, that's what it's supposed to do, a floated element floats above the rest of the page, so to speak, the only real solution I know is to simply apply a background color to the float right div, that background color will override the h4 background color.

Your other option is to make the width of the h4 explicit, left aligned, it defaults to full page width, like all block level elements.

[mongoloid001]

but my float div is too small to cover up everything. doh! I am in a dead lock here.

[isitreal]

just set an explicit width on your h4 element, that will take care of it fine. If you page is liquid, make the width a percent, if it's fixed, make it in pixels:

h4 {width:680px;} or whatever

[mongoloid001]

no, percent doesn't work very well. here is the link: [j2e-translate.sourceforge.net...]

[isitreal]

Oh, I see, just change the right floated box to a percent width, say about 25%. It never works mixing fixed px and % with divs, it's just a headache.

I just redid a whole site to be fully percent based to avoid these problems, all margins, padding, and borders are percent sized, that makes the pages totally fluid, it works really well, just pick percents that will look ok on 800x600 and 1024x768 and you'll be fine

So make the right floated box 25%, that looks like it would be about right, maybe 28 or 30%, then make the h4 be around 75%, play with it, it will work fine then.

[mongoloid001]

Thanks! I got it working now. I was under the impression that em was relative, i.e., percentage value.

-Mongo

[mongoloid001]

last question:).

Is margin within the box or outside the box?

For example: I have
div{ margin:2%}
div#main h4{width:65%}
div#spotlight {width:35%}

somehow things donot add up right.

[ergophobe]

total space required (standards mode) = margin-left + border-left + padding-left + width + margin-right + border-right + padding-right

Tom

[mongoloid001]

um, that's going to complicate things a little bit because the border is not a percentage value...

But thanks. I forgot that like table, I could easily found out all these by defining the border and the color of a div.

[isitreal]

As long as your borders aren't more than a pixel or two, which they don't seem to be in your page, you can just make the total of all the divs, margins, padding, etc = about 98 or 99 % of the total, that way a few pixels won't mess things up, just experiment with it, resize your browser window until you find the sweet spot and you should be fine, for example, if I want maybe 2 px of borders on a page that should be 100% width, I just make the total % width be around 99.6% and it looks almost perfect.

[mattr555]

just set the main DIVs right margin.

div#main{
margin-right:21em;
}

this will ensure that the content of main will not run over into the float. the extra 1em just gives a gap between the 2 divs.