In article trialanderror wrote:[color=blue]
> I've been happily chugging along thinking I understood floating divs
> and now find that I know a lot less than I thought I did. And the
> more I try "fixing" things, the worse it gets. A lot of what I'd been
> doing looked okay in IE 6.0, but in Gecko browsers like my Netscape
> 7.1 (I've been told they conform better to the standards than does
> IE), they look terrible.[/color]
Have you read and understood CSS box modell from spec? Notice that it is
different than IE with quirks mode.
[color=blue]
>
http://trialanderror.100freemb.com/2...5FloatDiv.html is a page I
> put together with some issues I'm struggling with, and it should be
> easy to view my css/html and offer me suggestions.
>
> The borders that I use on the page are merely intended to clearly show
> the area of the various divs; I realize that the width of the borders
> does have an impact on the screen width available for my use.[/color]
And many other things too. If you need help for some real case, include
all "irrelevant" info too, like if you want to use borders/background
colors. Those pretty often make things more complicated.
[color=blue]
> Basically, my issues that I can think of are at least:
>
> 1. I want a box on the left edge of the browser window. Next to it, I
> want a box with its left edge immediately to the right of the first
> box, and its right edge to be the very edge of the browser window.
> Yet I cannot figure out how to make that happen automatically; I have
> to manually size that box. What am I doing wrong?[/color]
You are floating them both. Only float the other. Use left margin same
size as float for no-floated.
[color=blue]
> 2. If I have an area of the screen (the whole screen, half the screen,
> 400 pixels worth; whatever) and want to have four (or any number) of
> objects spread out evenly spaced within that area, what is the easiest
> correct way to do it? Again, I'd like to have the browser figure out
> where to put them, rather than me manually calculating spacing, and
> have the visual appearance survive a resizing of the browser window.[/color]
You could say
wrapper {text-align:center;}
object {display:inline-table;}
It does work on Opera 6+ (maybe 5, can't remember, but none else.)
I don't think other browsers allow any sencible way.
[color=blue]
> 3. In the above example that I have posted, the objects display
> OUTSIDE the box I'd expect them to be in, at least in Netscape 7.x.
> Why?[/color]
Floats are taken out of flow, and box measures don't change because of
floats. Floats only affect line boxes. Above way would solve this too.
[color=blue]
> 4. I am sure that my way of doing even things that seem to render okay
> could be improved.[/color]
Unfortunately with CSS, the best way don't necessarily work (with html,
this case is somewhat rarer, fortunately). When doing layouts, it is
surprisingly often dispaly:inline-table is easiest way to do things. It
is not once or twice when you get thing working using few rules, and then
make it work with IE and end up with 5 times more code and it is not even
as usable.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
css positioning (float, div, margin, width...) confusing me like crazy 
