css positioning (float, div, margin, width...) confusing me like crazy

[trialanderror]

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.

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.

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?

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.

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?

4. I am sure that my way of doing even things that seem to render okay
could be improved.

I think a look at
http://trialanderror.100freemb.com/2...5FloatDiv.html will be more
clear than reading the above. Thanks in advance to all for any help
or suggestions.

[Lauri Raittila]

In article trialanderror wrote:

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.
Have you read and understood CSS box modell from spec? Notice that it is
different than IE with quirks mode.
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.
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.
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?
You are floating them both. Only float the other. Use left margin same
size as float for no-floated.
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.
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.
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?
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.
4. I am sure that my way of doing even things that seem to render okay
could be improved.

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.