Re: span won't honor width... div will, but always have line break before and after

In article
<1193367956.785197.4900 (AT) y27g2000pre (DOT) googlegroups.com>,
Summercool <Summercoolness (AT) gmail (DOT) com> wrote:

the problem i am trying to solve is... without using table, i was
thinking of just arranging several 100px width and height boxes in one
row, and each containing a 75 x 75 image inside...

So why not do just this? Put in a proper Strict doctype, and css
would be something like

..wrapper div {float: left; width:100px; height: 100px;}

while in the body of the html you might have something like:

<div class="wrapper">
<div><img src="..." height="75" width="75" alt="..."></div>
<div><img src="..." height="75" width="75" alt="..."></div>
<div><img src="..." height="75" width="75" alt="..."></div>
<div><img src="..." height="75" width="75" alt="..."></div>
......
</div>

The wrapper helps to avoid classing each div, and for some other
things which I will leave out for now. It may not be necessary,
depending on your needs. You can add margins and padding and
border to suit your purposes.

--
dorayme

On Oct 25, 8:19 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
1193367956.785197.4... (AT) y27g2000pre (DOT) googlegroups.com>,

Summercool <Summercooln... (AT) gmail (DOT) com> wrote:
the problem i am trying to solve is... without using table, i was
thinking of just arranging several 100px width and height boxes in one
row, and each containing a 75 x 75 image inside...

So why not do just this? Put in a proper Strict doctype, and css
would be something like

.wrapper div {float: left; width:100px; height: 100px;}

while in the body of the html you might have something like:

div class="wrapper"
div><img src="..." height="75" width="75" alt="..."></div
div><img src="..." height="75" width="75" alt="..."></div
div><img src="..." height="75" width="75" alt="..."></div
div><img src="..." height="75" width="75" alt="..."></div
.....
/div

The wrapper helps to avoid classing each div, and for some other
things which I will leave out for now. It may not be necessary,
depending on your needs. You can add margins and padding and
border to suit your purposes.

that looks nice. without needing to class or style each div inside
the wrapper.
now if i am to create another row, then i actually need to have a
<div style="clear:both"> </div>
and then start another row huh? actually, won't this last div also
inherit the "float: left" as well?
will the "clear: both" be kind of depending on the float defined some
where else... so you kind of have to remember the coupling... (change
one place (.css file), need to change the other (.html file)...
but i like your solution with the wrapper nonetheless.

In article
<1193370742.096750.57160 (AT) t8g2000prg (DOT) googlegroups.com>,
Summercool <Summercoolness (AT) gmail (DOT) com> wrote:

On Oct 25, 8:19 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
1193367956.785197.4... (AT) y27g2000pre (DOT) googlegroups.com>,

Summercool <Summercooln... (AT) gmail (DOT) com> wrote:
the problem i am trying to solve is... without using table, i was
thinking of just arranging several 100px width and height boxes in one
row, and each containing a 75 x 75 image inside...

So why not do just this? Put in a proper Strict doctype, and css
would be something like

.wrapper div {float: left; width:100px; height: 100px;}

while in the body of the html you might have something like:

div class="wrapper"
div><img src="..." height="75" width="75" alt="..."></div
div><img src="..." height="75" width="75" alt="..."></div
div><img src="..." height="75" width="75" alt="..."></div
div><img src="..." height="75" width="75" alt="..."></div
.....
/div

The wrapper helps to avoid classing each div, and for some other
things which I will leave out for now. It may not be necessary,
depending on your needs. You can add margins and padding and
border to suit your purposes.

that looks nice. without needing to class or style each div inside
the wrapper.

Correct. If all you have is these little floating div boxes, the
css could not be more simple; no need for wrapper, just div
directly:

div {float:left; ... margins and paddings to suit;}

now if i am to create another row, then i actually need to have a
div style="clear:both"> </div

You can simply repeat the wrapper and contents (with different
images of course) again. The wrapper is not floated, remember. it
is just a plain div in the flow of *its* container (maybe the
body). Only divs in the wrapper will float. In all of these
things there are some complications to do with different
browsers.

But it all depends on your purpose. If it is, e.g. for a gallery
of images, why bother, they will wrap beautifully according to
the viewers browser size. Just keep on piling in those divs!

Really, this is quite the ultimate in fluid design, good for
everyone, or at least, the least irritating. If a person has a
very small screen, he has to scroll horizontally with your fixed
number divs per line. If he has a big screen, he will not be able
to use it to advantage and might have to scroll horizontally
*unnecessarily*. As I do not know quite your purpose, it is hard
to say if you will appreciate this advice. But I do hope you
understand it.

If you fancy such a thing I can give you a few models to peek at.
There are a few sophistications but why not knock up a url with
some of these basic ideas and see what you fancy or how you would
like it improved.

and then start another row huh? actually, won't this last div also
inherit the "float: left" as well?

will the "clear: both" be kind of depending on the float defined some
where else... so you kind of have to remember the coupling... (change
one place (.css file), need to change the other (.html file)...
but i like your solution with the wrapper nonetheless.

Tell me what you would sort of like to see and I will dash into
the dorayme factory and see what goodies are in there for you. <g>

--
dorayme