473,836 Members | 1,435 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Nested boxes problem

Here's what I am trying to do:
(Names represent CSS classes.)
I want to create a photo gallery. I want the entire gallery to be
surrounded by a box named PhotoGallery. I want a fluid placement of
the individual Items within PhotoGallery. An Item is a box that has
two child boxes, PhotoBox and Caption. Photobox has an explicit width
and height. PhotoBox contains an image whose dimensions may vary, but
are constrained to be within PhotoBox's dimensions. Caption has an
explicit width, but its height is determined by the text inside.
Item's width and height depend on both PhotoBox and Caption.
PhotoGallery's width has two contexts. In the first context,
PhotoGallery has the width of the viewport. Items are laid out
fluidly inline, meaning that they need to wrap at the end of each
line. In the second PhotoGallery width context, there are a fixed
number of Items per line, and the width of PhotoGallery depends on the
width of the lines. It is assumed that all Items will have equal
widths.

Here is a sketch:

+-(PhotoGallery)-----------------------------------
| +-(Item)---------+ +-(Item)---------+
| | +-(PhotoBox)-+ | | +-(PhotoBox)-+ |
| | | | | | | XXXXXXXX | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | XX(Img1)XX | | | | X(Img2)X | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | | | | | XXXXXXXX | | ...
| | +------------+ | | +------------+ |
| | +-(Caption)--+ | | +-(Caption)--+ |
| | | Here is a | | | | Here is a | |
| | | caption. | | | | longer | |
| | +------------+ | | | caption | |
| +----------------+ | +------------+ |
| +----------------+
|
| +-(Item)---------+ +-(Item)---------+
| | +-(PhotoBox)-+ | | +-(PhotoBox)-+ |
| | | | | | | XXXXXXXX | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | XX(Img3)XX | | | | X(Img4)X | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | | | | | XXXXXXXX | | ...
| | +------------+ | | +------------+ |
| | +-(Caption)--+ | | +-(Caption)--+ |
| | | Here is a | | | | Here is a | |
| | | caption. | | | | longer | |
| | +------------+ | | | caption | |
| +----------------+ | +------------+ |
| +----------------+
|
| ... ...
I cannot seem to create this layout with any combination of inline-
and block-level boxes. I am testing using IE 6.0 and Mozilla Firefox
0.9 (Mozilla 5.0) under Windows 2000 Pro, with the xhtml11.dtd
Doctype. Feel free to point out errors in my inferences. References
are taken from the W3 CSS 2.0 Spec (REC-CSS2).

Let's start from the inside out.

Inference: A span with only text inside is a non-replaced inline-level
element.

Reference: 10.2 Content width: the 'width' property:
"This property specifies the content width of boxes generated by
block-level and replaced elements. This property does not apply to
non-replaced inline-level elements. ...The width of a replaced
element's box is intrinsic and may be scaled by the user agent if the
value of this property is different than 'auto'."

Conclusion: PhotoBox and Caption must be block-level elements.
Otherwise, the width of the image would determine the width of
PictureBox, and the width of the text would determine the width of
Caption. Therefore, I will use divs (which I understand to be basic
block-level elements) to represent them.

By (10.5), I can also explicitly set the height of the PhotoBox div.
By (10.6.3), I know that Caption will be just high enough to contain
all the text.

Now the messy part. I want to nest PhotoBox and Caption inside
another box, Item. But inline- or block-level? If I use block-level,
then the user agent is (probably) going to be greedy and use as much
of the viewport as possible for the width. So I would have to
explicitly define the dimensions of the div, since CSS sadly
(neglegently?) does not allow me to specify a lazy algorithm for
sizing, but rather leaves this up to the user agent altogether. Of
course I will know the width of the images at design time, so I could
assign explicit dimensions to everything. I could also "float: left"
the divs to get them to fluidly layout, and have lazy sizing. But
then, I can't put those floated elements into the PictureGallery box,
*and* the rest of the page contents will not fluidly layout relative
to the floated divs (as in before/after them, not wrapping beside
them).

So then the other option is inline-level. Just try nesting
block-level elements inside an inline-level element -- doesn't work!!

So is it possible to accomplish what I want using the current box
model? It seems like a simple set of nested boxes to me, but the more
I read the CSS spec, the more it seems that nesting boxes and fluid
layouts do not mix.

I am sure that many people have posted what they consider to solutions
to "problems" in the CSS spec. I don't want to make the same mistake,
but I don't seem to be able to size the inline-level boxes and have
them wrap as I would like them to. And the block-level boxes I can
size can only be lazy-sized by floated, which prohibits them from
being nested inside a box.

-Dustin
Jul 20 '05 #1
9 4081
Els
Dustin wrote:
Here's what I am trying to do:
(Names represent CSS classes.)
I want to create a photo gallery. I want the entire
gallery to be surrounded by a box named PhotoGallery. I
want a fluid placement of the individual Items within
PhotoGallery. An Item is a box that has two child boxes,
PhotoBox and Caption. Photobox has an explicit width and
height. PhotoBox contains an image whose dimensions may
vary, but are constrained to be within PhotoBox's
dimensions. Caption has an explicit width, but its height
is determined by the text inside. Item's width and height
depend on both PhotoBox and Caption. PhotoGallery's width
has two contexts. In the first context, PhotoGallery has
the width of the viewport. Items are laid out fluidly
inline, meaning that they need to wrap at the end of each
line. In the second PhotoGallery width context, there are
a fixed number of Items per line, and the width of
PhotoGallery depends on the width of the lines. It is
assumed that all Items will have equal widths.

Here is a sketch:

+-(PhotoGallery)-----------------------------------
| +-(Item)---------+ +-(Item)---------+
| | +-(PhotoBox)-+ | | +-(PhotoBox)-+ |
| | | | | | | XXXXXXXX | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | XX(Img1)XX | | | | X(Img2)X | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | | | | | XXXXXXXX | | ...
| | +------------+ | | +------------+ |
| | +-(Caption)--+ | | +-(Caption)--+ |
| | | Here is a | | | | Here is a | |
| | | caption. | | | | longer | |
| | +------------+ | | | caption | |
| +----------------+ | +------------+ |
| +----------------+
|
| +-(Item)---------+ +-(Item)---------+
| | +-(PhotoBox)-+ | | +-(PhotoBox)-+ |
| | | | | | | XXXXXXXX | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | XX(Img3)XX | | | | X(Img4)X | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | | | | | XXXXXXXX | | ...
| | +------------+ | | +------------+ |
| | +-(Caption)--+ | | +-(Caption)--+ |
| | | Here is a | | | | Here is a | |
| | | caption. | | | | longer | |
| | +------------+ | | | caption | |
| +----------------+ | +------------+ |
| +----------------+
|
| ... ...
I cannot seem to create this layout with any combination of
inline- and block-level boxes. I am testing using IE 6.0
and Mozilla Firefox 0.9 (Mozilla 5.0) under Windows 2000
Pro, with the xhtml11.dtd Doctype. Feel free to point out
errors in my inferences. References are taken from the W3
CSS 2.0 Spec (REC-CSS2).

Let's start from the inside out.


Sorry, here's where I stopped reading. Lost my attention.
I have made an example page, showing more or less what you
want, but you have to know, that as long as the items are of
different heights, the wrapping can't happen the way you want.
All the items (picture and caption together) need to be of
equal height to prevent them sliding up to one side of the
viewport.

I did it with little two-celled tables, using the cells to
have the pictures vertically centered in their own little box,
as they aren't all the same height.

Anyway, before I type a longer message than you did:
http://locusmeus.com/test/thumbswithcaptions.html
http://locusmeus.com/test/thumbswith...scentered.html

Note that in the centered version, because of the
display:inline, the items will lose their equal width in Gecko
browsers. IE displays fine, due to their lack of following the
standards, while Opera does too, due to their support of
inline-table.

hth, despite not having read your complete message.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 20 '05 #2
Thanks for your reply, Els. I know what I want to do can be done with
tables, but I was under the impression that css boxes should be used
for aligning content and placing borders around items, while tables
should be reserved for tabular data. I do not think having numerous
inline tables is the proper use for tables. Then again, what is the
purpose of an inline table?

Ultimately, what I want is a nested css box solution, without tables.
Can this be done? From what I see, block-level boxes are the only
boxes that can be dimensioned. Because they always appear on a line
by themselves relative to their siblings in the document tree, I am
not going to be able to achieve the inline layout I want with boxes.
They can be floated, but this puts them in a special realm where they
aren't inline with the rest of the page's contents. What really
bothers me is that inline-level boxes cannot be dimensioned, and that
their height is determined by the lineheight of their contents. Far
be it from me, relatively inexperienced, to question the box model,
but does it really make sense to call something a box, to even put a
border around it, and then define its height to be the lineheight of
its content area, allowing inline-level boxes' borders to overlap when
the line wraps?

Is there a distinction between an inline box that segments, like the
popular <em> example when it is broken at the end of the line and part
of it wraps, and an inline box that is atomic -- does not segment when
it only partially fits on a line, but rather wraps as a whole? If I
put spans side-by-side with no whitespace, they dont't wrap. If I add
whitespace, they will wrap, but the whitespace affects horizontal
positioning. If I put a <br> inside of a <span>, the <span> segments
(and not even according to the CSS2 spec in IE6). I want an inline
box that doesn't segment! Like a table cell! I can put an entire
paragraph of text in a table cell, and the cell lazy-sizes to the
text. Can someone provide some insight?

I really hope someone can show me how to do this because I am really
starting to hate what is going on with CSS layout.

Els <el*********@ti scali.nl> wrote in message news:<Xn******* **********@130. 133.1.4>...
Dustin wrote:
Here's what I am trying to do:
(Names represent CSS classes.)
I want to create a photo gallery. I want the entire
gallery to be surrounded by a box named PhotoGallery. I
want a fluid placement of the individual Items within
PhotoGallery. An Item is a box that has two child boxes,
PhotoBox and Caption. Photobox has an explicit width and
height. PhotoBox contains an image whose dimensions may
vary, but are constrained to be within PhotoBox's
dimensions. Caption has an explicit width, but its height
is determined by the text inside. Item's width and height
depend on both PhotoBox and Caption. PhotoGallery's width
has two contexts. In the first context, PhotoGallery has
the width of the viewport. Items are laid out fluidly
inline, meaning that they need to wrap at the end of each
line. In the second PhotoGallery width context, there are
a fixed number of Items per line, and the width of
PhotoGallery depends on the width of the lines. It is
assumed that all Items will have equal widths.

Here is a sketch:

+-(PhotoGallery)-----------------------------------
| +-(Item)---------+ +-(Item)---------+
| | +-(PhotoBox)-+ | | +-(PhotoBox)-+ |
| | | | | | | XXXXXXXX | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | XX(Img1)XX | | | | X(Img2)X | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | | | | | XXXXXXXX | | ...
| | +------------+ | | +------------+ |
| | +-(Caption)--+ | | +-(Caption)--+ |
| | | Here is a | | | | Here is a | |
| | | caption. | | | | longer | |
| | +------------+ | | | caption | |
| +----------------+ | +------------+ |
| +----------------+
|
| +-(Item)---------+ +-(Item)---------+
| | +-(PhotoBox)-+ | | +-(PhotoBox)-+ |
| | | | | | | XXXXXXXX | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | XX(Img3)XX | | | | X(Img4)X | |
| | | XXXXXXXXXX | | | | XXXXXXXX | |
| | | | | | | XXXXXXXX | | ...
| | +------------+ | | +------------+ |
| | +-(Caption)--+ | | +-(Caption)--+ |
| | | Here is a | | | | Here is a | |
| | | caption. | | | | longer | |
| | +------------+ | | | caption | |
| +----------------+ | +------------+ |
| +----------------+
|
| ... ...
I cannot seem to create this layout with any combination of
inline- and block-level boxes. I am testing using IE 6.0
and Mozilla Firefox 0.9 (Mozilla 5.0) under Windows 2000
Pro, with the xhtml11.dtd Doctype. Feel free to point out
errors in my inferences. References are taken from the W3
CSS 2.0 Spec (REC-CSS2).

Let's start from the inside out.


Sorry, here's where I stopped reading. Lost my attention.
I have made an example page, showing more or less what you
want, but you have to know, that as long as the items are of
different heights, the wrapping can't happen the way you want.
All the items (picture and caption together) need to be of
equal height to prevent them sliding up to one side of the
viewport.

I did it with little two-celled tables, using the cells to
have the pictures vertically centered in their own little box,
as they aren't all the same height.

Anyway, before I type a longer message than you did:
http://locusmeus.com/test/thumbswithcaptions.html
http://locusmeus.com/test/thumbswith...scentered.html

Note that in the centered version, because of the
display:inline, the items will lose their equal width in Gecko
browsers. IE displays fine, due to their lack of following the
standards, while Opera does too, due to their support of
inline-table.

hth, despite not having read your complete message.

Jul 20 '05 #3
On 26 Jun 2004 11:03:50 -0700, Dustin <wa*******@emai l.com> wrote:
I know what I want to do can be done with
tables, but I was under the impression that css boxes should be used
for aligning content and placing borders around items, while tables
should be reserved for tabular data.


Picture and caption are arguably tabular data. Sure, one could argue that
it might not be, but there's a relationship in the column, you're giving
different information about the same thing. Unless you're really
uncomfortable, I'd think a table is fine.
Jul 20 '05 #4
Els
Dustin wrote:
Thanks for your reply, Els. I know what I want to do can
be done with tables, but I was under the impression that
css boxes should be used for aligning content and placing
borders around items, while tables should be reserved for
tabular data. I do not think having numerous inline tables
is the proper use for tables. Then again, what is the
purpose of an inline table?

Ultimately, what I want is a nested css box solution,
without tables. Can this be done? From what I see,
block-level boxes are the only boxes that can be
dimensioned. Because they always appear on a line by
themselves relative to their siblings in the document tree,
I am not going to be able to achieve the inline layout I
want with boxes. They can be floated, but this puts them in
a special realm where they aren't inline with the rest of
the page's contents.
Can you explain what you mean by that? If you manage div boxes
of equal height and width, I don't see why floating them would
not do what you want. The only reason I used tables is that I
wanted the pictures vertically centered within their little
square place.
What really bothers me is that
inline-level boxes cannot be dimensioned, and that their
height is determined by the lineheight of their contents.
Far be it from me, relatively inexperienced, to question
the box model, but does it really make sense to call
something a box, to even put a border around it, and then
define its height to be the lineheight of its content area,
allowing inline-level boxes' borders to overlap when the
line wraps?
I think you can define the height of a div just fine, without
being limited to the contents.
Is there a distinction between an inline box that segments,
like the popular <em> example when it is broken at the end
of the line and part of it wraps, and an inline box that is
atomic -- does not segment when it only partially fits on a
line, but rather wraps as a whole? If I put spans
side-by-side with no whitespace, they dont't wrap. If I
add whitespace, they will wrap, but the whitespace affects
horizontal positioning. If I put a <br> inside of a
<span>, the <span> segments (and not even according to the
CSS2 spec in IE6). I want an inline box that doesn't
segment! Like a table cell!
Then use a table cell! :-)
I can put an entire paragraph
of text in a table cell, and the cell lazy-sizes to the
text. Can someone provide some insight?

I really hope someone can show me how to do this because I
am really starting to hate what is going on with CSS
layout.


[laaaarge snip]

You can use divs for what you want, floating divs, with a set
width and height, or you can use small tables, also with a set
height and width. Or I just don't understand what you want.

And about the use of small tables: what is wrong with a series
of two celled tables, if you would need 3 divs to replace each
table?

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 20 '05 #5
Els <el*********@ti scali.nl> wrote in message news:<Xn******* **********@130. 133.1.4>...
Dustin wrote:
[snip]
Can you explain what you mean by that? If you manage div boxes
of equal height and width, I don't see why floating them would
not do what you want. [snip]


Sure :) I develop components that I want to plop right into an empty
web page, an existing design, or another component. When you float
things, if there is content in the page and unless the content is
floated in its own box, then the content will wrap around the floated
elements. If adding a component means I have to make changes to the
rest of the page to make it work, then the component is not "loosely
coupled", and is not really a component, more like a nonreusable
solution (hack). Also, when you float the divs, you lose the ability
to nest those divs in another box (and no, you can't float inside a
float; there is only one "float space"). Hence, I can't embed this
component in another component, which is baaaad for me.
What really bothers me is that
inline-level boxes cannot be dimensioned, and that their
height is determined by the lineheight of their contents.
Far be it from me, relatively inexperienced, to question
the box model, but does it really make sense to call
something a box, to even put a border around it, and then
define its height to be the lineheight of its content area,
allowing inline-level boxes' borders to overlap when the
line wraps?
I think you can define the height of a div just fine, without
being limited to the contents.


A div is not an inline-level box. It is block-level. Try getting
more than one div on the same horizontal line without floating (or
using table cells, or setting "display: inline", which really makes it
a span). Also try to get a div to lazy-size (shrinkwrap) to its
contents like an inline-level box without floating (or javaScript).
Spans are inline-level boxes. Have you ever seen two spans atop each
other when the line wraps? The line height for the contents of inline
boxes is much smaller than the area of their borders when they have
padding. The spans' bordered areas overlap! Have you ever seen
someone do layout with spans? No, because they segment and because
they can't be sized (they take the size of their contents, explicit
dimensions are ignored per CSS2 spec). So there is no inline atomic
box, just the table cell.
Is there a distinction between an inline box that segments,
like the popular <em> example when it is broken at the end
of the line and part of it wraps, and an inline box that is
atomic -- does not segment when it only partially fits on a
line, but rather wraps as a whole?
[snip]
I want an inline box that doesn't
segment! Like a table cell!
Then use a table cell! :-)


I likely will. This is one of those moments where I shake my head in
disgust at the stupid CSS box model and wonder how the authors expect
us to stop using table cells for layout when CSS does not provide us
real alternatives.
I can put an entire paragraph
of text in a table cell, and the cell lazy-sizes to the
text. Can someone provide some insight?

I really hope someone can show me how to do this because I
am really starting to hate what is going on with CSS
layout.
[laaaarge snip]

You can use divs for what you want, floating divs,
with a set width and height,


Can't be nested = not loosely coupled.
or you can use small tables, also with a set
height and width.
Can be nested; are loosely coupled; will likely use this method.
Or I just don't understand what you want.
I want to know why CSS boxes are so useless.

And about the use of small tables: what is wrong with a series
of two celled tables, if you would need 3 divs to replace each
table?


Because I have

<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

instead of just

<div>
<div>
</div>
<div>
</div>
</div>

I would never describe the organization of my data in the former way
in an XML document, so why would I want to do it in an XHTML document?
Jul 20 '05 #6
Els
Dustin wrote:
Els <el*********@ti scali.nl> wrote in message
news:<Xn******* **********@130. 133.1.4>...
Dustin wrote:
> [snip]


Can you explain what you mean by that? If you manage div
boxes of equal height and width, I don't see why floating
them would not do what you want. [snip]


Sure :) I develop components that I want to plop right
into an empty web page, an existing design, or another
component. When you float things, if there is content in
the page and unless the content is floated in its own box,
then the content will wrap around the floated elements. If
adding a component means I have to make changes to the rest
of the page to make it work, then the component is not
"loosely coupled", and is not really a component, more like
a nonreusable solution (hack). Also, when you float the
divs, you lose the ability to nest those divs in another
box (and no, you can't float inside a float; there is only
one "float space"). Hence, I can't embed this component in
another component, which is baaaad for me.


I understand that. But it is surely possible to make a box, in
which you float items, and use a clear:both div below those
items, so they really all stay in that box. But yes, that
complete box can't easily be floated, or put next to other
floated objects.
> What really bothers me is that
> inline-level boxes cannot be dimensioned, and that their
> height is determined by the lineheight of their
> contents. Far be it from me, relatively inexperienced,
> to question the box model, but does it really make sense
> to call something a box, to even put a border around it,
> and then define its height to be the lineheight of its
> content area, allowing inline-level boxes' borders to
> overlap when the line wraps?


I think you can define the height of a div just fine,
without being limited to the contents.


A div is not an inline-level box. It is block-level. Try
getting more than one div on the same horizontal line
without floating (or using table cells, or setting
"display: inline", which really makes it a span). Also
try to get a div to lazy-size (shrinkwrap) to its contents
like an inline-level box without floating (or javaScript).
Spans are inline-level boxes. Have you ever seen two spans
atop each other when the line wraps? The line height for
the contents of inline boxes is much smaller than the area
of their borders when they have padding. The spans'
bordered areas overlap! Have you ever seen someone do
layout with spans? No, because they segment and because
they can't be sized (they take the size of their contents,
explicit dimensions are ignored per CSS2 spec). So there
is no inline atomic box, just the table cell.


Got it :-)
> Is there a distinction between an inline box that
> segments, like the popular <em> example when it is
> broken at the end of the line and part of it wraps, and
> an inline box that is atomic -- does not segment when it
> only partially fits on a line, but rather wraps as a
> whole? [snip]
> I want an inline box that doesn't
> segment! Like a table cell!


Then use a table cell! :-)


I likely will. This is one of those moments where I shake
my head in disgust at the stupid CSS box model and wonder
how the authors expect us to stop using table cells for
layout when CSS does not provide us real alternatives.


hmm...
I sometimes shake my head (although not in disgust) at what
people want ;-)

I have used floated inline-tables which do exactly what I
want, inside a box in a page, with no problems, I also have
used (on other pages) inline images, and also (yet another
page) floated images next to other floats, and yes, sometimes
it was difficult, but in the end I got what I wanted.
> I can put an entire paragraph
> of text in a table cell, and the cell lazy-sizes to the
> text. Can someone provide some insight?
>
> I really hope someone can show me how to do this because
> I am really starting to hate what is going on with CSS
> layout.


[laaaarge snip]

You can use divs for what you want, floating divs,
with a set width and height,


Can't be nested = not loosely coupled.


Stop wanting to nest floats ;-)
or you can use small tables, also with a set
height and width.


Can be nested; are loosely coupled; will likely use this
method.
Or I just don't understand what you want.


I want to know why CSS boxes are so useless.


I don't think they are, they just won't behave like a table,
but hey, neither do my chairs :-)
And about the use of small tables: what is wrong with a
series of two celled tables, if you would need 3 divs to
replace each table?


Because I have

<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

instead of just

<div>
<div>
</div>
<div>
</div>
</div>

I would never describe the organization of my data in the
former way in an XML document, so why would I want to do it
in an XHTML document?


Cause you don't want a complete table layout, yet floating
items in which a picture and some text stay at a certain fixed
height and distance from each other :-)

I have seen examples of floating
<div>
<div>
</div>
<div>
</div>
</div>
but they contained pictures of equal height and width.
Which of course also is an option, but maybe not what you're
after. Plus it has the same disadvantages as floating tables
of course.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 20 '05 #7
Els <el*********@ti scali.nl> wrote in message news:<Xn******* **********@130. 133.1.4>...
hmm...
I sometimes shake my head (although not in disgust) at what
people want ;-)
LOL!

Stop wanting to nest floats ;-)
*grin* I don't. I would like to see more flexibility for nesting
inline boxes without using float.
Cause you don't want a complete table layout, yet floating
items in which a picture and some text stay at a certain fixed
height and distance from each other :-)


The box model defines padding, borders, and margins. These alone
(provided boxes played nicely) would be enough to do what I want.

Well, thanks for your help. I appreciate it! I think the
shortcomings with CSS boxes are due to "if it ain't broke...". I'm
too much of an idealist sometimes :-P
Jul 20 '05 #8
I found what I wanted. CSS 2.1 defines "display: inline-block;",
which gives the atomic inline box I described when applied to a <span>
in both IE6 and Firefox 0.9. These boxes can be freely nested. I
guess someone agreed with me.

BTW, I used the following code in a test:

<style type="text/css">
span {
display: inline-block;
border: solid 1px black;
padding: 5px;
margin: 5px;
}
</style>

<span>
<span>
<span>
test
</span>
<span>
test
</span>
</span>
<span>
<span>
test
</span>
<span>
test
</span>
</span>
</span>

When I use "padding: 0;" in IE6, margins do not collapse. However,
the margins collapse in Firefox even when padding is used on the spans
(making the margins no longer "adjoining" ) as in the given code. This
is contrary to the spec in both cases, is it not?

-Dustin

wa*******@email .com (Dustin) wrote in message news:<76******* *************** ***@posting.goo gle.com>...
Els <el*********@ti scali.nl> wrote in message news:<Xn******* **********@130. 133.1.4>...
hmm...
I sometimes shake my head (although not in disgust) at what
people want ;-)


LOL!

Stop wanting to nest floats ;-)


*grin* I don't. I would like to see more flexibility for nesting
inline boxes without using float.
Cause you don't want a complete table layout, yet floating
items in which a picture and some text stay at a certain fixed
height and distance from each other :-)


The box model defines padding, borders, and margins. These alone
(provided boxes played nicely) would be enough to do what I want.

Well, thanks for your help. I appreciate it! I think the
shortcomings with CSS boxes are due to "if it ain't broke...". I'm
too much of an idealist sometimes :-P

Jul 20 '05 #9
nevermind. CSS 2.1 is still a candidate rec.; mozilla browser hasn't
implemented inline-block yet.

wa*******@email .com (Dustin) wrote in message news:<76******* *************** ****@posting.go ogle.com>...
However,
the margins collapse in Firefox even when padding is used on the spans
(making the margins no longer "adjoining" ) as in the given code. This
is contrary to the spec in both cases, is it not?

Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
2660
by: Rich Wahl | last post by:
I am writing a personal application that uses windowListeners, ActionListeners and possible ItemListeners (combo boxes). I have one of the Buttons (ActionListeners) set to have a popup frame/panel to display a Choice. But I would like the Program to not continue on until the user makes their selection from the dropdown/Combo box in the new popup window. Right now, I have it setup so that the Listeners for the main frame are looking...
3
5016
by: Philip | last post by:
I am trying to make a bunched of left-floated divs that will be contained in a larger div. the floated divs all contain a left-floated img and text of varying sizes. If I don't set a height (or height:auto) the larger div doesn't seem to see the nested divs, and they spill out the bottom. IE seems to automatically resize the larger div as long as I set the height to 100% or any pixel size. Mozilla doesn't recognize the percent, and...
7
3067
by: Joe | last post by:
Hello, The code below is an entire HTML page that has a problem when using a <p> tag inside a CSS box (when running IE6). I was being a good boy and I replaced my single-cell <table> elements with these CSS boxes. However, I can't use <p> formatting within the a CSS box. The nested paragraph jumps outside of the box. I've been told that the HTML works as expected sinde the Dreamweaver preview window, so I'm suspecting IE6. Anyone know...
4
2532
by: Vincent.Piattelli | last post by:
I working on a page that has two nested DIV elements. The child DIV is absolutely positioned within the parent DIV. The contents of the child DIV are dynamic, but no matter how large it get, I want the child to be rendered totally within the parent DIV. As things stand, as the child DIV grows, it overflows and sticks out. How can I style the parent so that it always is larger than the child?
20
10837
by: Robert | last post by:
Need some help to stop me going around in circles on this one.... Have a nested subform (subform2) which simulates a continuous form for the record on the parent subform. Subform2 has rows of either an option button plus two text fields or a checkbox plus two text fields Am wanting to save the user entries into an underlying table. Tag property for each option button, check box or text field has the value of the key
8
2022
by: tomasio | last post by:
Dear NG-Readers, I forgot to post the URL to the html-file and the linked CSS. Here they are: html: http://tomasio.at/temp/Unterseite_Templ2.html CSS: http://tomasio.at/temp/stylesheet.css correct display: http://tomasio.at/temp/Unterseite_Templ2a.jpg First I want to apologize for crossposting this, but I got no idea where this topic really belongs to. I have built a html-page with some
1
6016
by: ChrisW | last post by:
Just out of interest, does anyone know what the behaviour of the following is supposed to be: <div style="width: 80%"> <div style="width: 600px"> <!--HTML code goes here --> </div>
3
2165
by: James | last post by:
I'm having trouble trying to put 3 definition lists into a unordered list which has been styled to appear horizontally. My goal is to have the 3 definition lists appear side by side and fill the parent box's width. I've tried giving the <dtelement a narrow width, allowing room for the all three, but i've had no success. I'd like, if possible, to do this without specifying any widths as i'll be conditionally hiding one or maybe two columns...
5
4127
by: John Kotuby | last post by:
Hi all, After more than a year programming with ASP.NET 2.0 and VB I am still finding it difficult to leave some habits from classic ASP behind. this is particularly true with cross-page posting. My site uses Master pages and user controls. On an Advanced Search page I have numerous entry boxes and listboxes (keywords, categories, etc.) which are primarily standard HTML. I post this page to a different page which lists results and...
0
10852
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10556
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10599
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10257
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9383
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7793
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
1
4459
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4022
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3116
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.