Forum Moderators: not2easy
I have a div container (class="introBox") with another div (class="floater") inside it that is floated right. All is well, the float's content flow outside of the bottom of the container.
To try to keep the float's content within the introBox container, I added a final item in the container before the closing </div>. It is another div (class="stopper") styled clear: both. This stretches the bottom of the container as expected, but the left margin of the container seems to change to 0.
The key styles are:
body, div { margin: 0; padding: 0 }
body { text-align: center; padding: 1em }
div { text-align: left }
.introBox { margin: 1em 10em; border: 3px solid orange; padding: 10px; background-color: #e8f0f0 }
.floater { float: right; width: 200px; margin: 0 0 0 100px; padding: 1em; border: 1px dotted blue }
.stopper{ display: none; position: relative; height: 1px; clear: both; border: 1px solid red }
#button { cursor: hand; padding: .5em; background-color: #999999 }
and the main body code is:
<div id="mainContent">
<div class="introBox">
A little content. A little content. A little content.
A little content. A little content. A little content. A little content.
<div class="floater">some stuff some stuff some stuff some stuff some stuff</div>
<div style="display: block" class="stopper"></div>
A little content. A little content. A little content. A little content.
A little content. A little content. A little content. A little content.</div>
</div>
It's using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<snip>
First post here, I hope I got it all correct.
[edited by: swa66 at 8:42 am (utc) on Jan. 27, 2009]
[edit reason] No personal URLs are allowed, see ToS and forum charter [/edit]
Browsers interpret widths, heights, paddings and margins quite differently so when you have a number of divs with no level of control over them they tend to come up with all kinds of weird nonsense as they try and figure out what to do.
If you, as an example, give the #mainContent a width of say 80% and a margin of 0 auto then suddenly the div starts to behave in the way you're seeking. It still isn't quite perfect because you have a lot of margins and paddings going on... but you get the drift.
I think this is a very simple example: it's really just a centered page. Unfortunately they took out the link to the image of a site that shows the problem and the link to the full code. It can be hard to explain this stuff, and people lose interest in reading pretty quick, but I guess more words are needed.
The mainContent id should have been removed when I took the code snip. It is just a div with the default 0 padding and 0 margin. So the offending container is just one with margin: 1em 10em. The border and other padding are just there to make the problem visible.
The problem comes and goes when the div with class "stopper" is displayed. With "display: none" the introBox container behaves as it should. With "display: block" the left border of introBox gets mucked up, but it also stretches lower to the bottom of the floating container as it should. I can change the width of the stopper div to 20%, or anything else, so it's not that it is being interpreted as too wide.
I have an even weirder issue happening on the full page that displays with the left margin of the floater being displayed on the right with IE. Yet their Developer Toolbar tells me it is in the right place. I haven't been able to isolate that one yet. It in this same page, so I want to get this (hopefully) easier one out of the way first. But if you have heard of something like that, please toss in a response.
To get the content to centre without the container div just do the same thing as I said above and add a width to .introbox
To fix the floater breaking out of the introbox just float the introbox. It will still centre because, as above, you've set the width.
Your last problem made no sense at all, sorry.
The solutions offered don't work for me because of the other page elements: the size is controlled by another div, so I can't set the width. There is content below the container, so I can't float it or it may interfere with what's below, but I'll play with that concept and see if I can use it without too many changes to the real page that I'm working on.
At least I learned something: that a float won't break out of a containing float. Thanks for that one.
I could probably fix the whole think by adding another div to contain the problems, but I'd really prefer to understand what is going on instead of kludging a fix.
