Topic: Questions about "display: compact"

Well, it's been a while since I've been in this forum... figures that I only come back when I need something, right? Heh. I'll have to try to make a more concerted effort in the future.

Anyway, my question: In the section on compact boxes in the W3C CSS2 Specs, it says that setting up a box with "display: compact" and another box with a sufficient margin will basically produce a two-column table effect (see the link for an example). However, when I try this, I don't get vertical alignment (in other words, the left-hand element is on one line, and the right-hand element is on the next line). What I'm trying to do is have a small picture on the left with some descriptive text on the right. I've looked at some other resources concerning compact boxes, and they show the same results I've been getting (content on different lines).

Am I going at this the right way, or is there another way to do it? Very simply, I just want a two-column table... without the table.

Thanks for the help.




Cell 270

Suho1004: Without checking the browser compliance tables I'd guess that this style is poorly implemented which is why it isn't working. You might be better of waiting for CSS3

I'd suggest (from your description) that you should use float to get the effect you are looking for.

___________________
Emps

FAQs: Emperor

not wait for CSS3, but for actual browser implementation of all of CSS2 ... or most of it... lots of CSS1 isn't even implemented completely.

It must be really hard to program browsers to be complient.
Maybe one day I'll try it and see.

Hmm... I had thought about incomplete browser implementation... I'll have to look that up. Thanks guys.

genis: Amen, brother. We need better compliance, not newer versions. It's the same old crap we had with HTML, just a different technology.

*runs off to research float*

Well, float works like a charm--except for one little thing. According the CSS2 specs:

quote:

---

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.

---

Now, the way I have things set up is like this (try to imagine this, because I don't have any place to put a screen shot right now):

Heading

img explanatory text...

The images aren't all that big, but the text varies in length as it is, sometimes running longer than the image, sometimes not. When it runs longer, there is the proper amount of white space before the next heading, but if the text is shorter than the image, it looks cramped (because the float isn't calculated in the flow). Which is the way it's supposed to work, of course, but it kind of sucks for what I'm trying to do.

I've racked my brain and read the specs over and over, and the only thing I can think to do to make it work with float is to make sure that the text runs longer than the image. It also occured to me that it might work if I put the float and the text in a "container" div, but that seems a bit forced. Is that the best way to do it, or am I missing something?

[Edit: Um, OK, scratch that last part; putting it all in a container div doesn't work, as the float doesn't force the bottom of the div box down--basically leaving me with what I'm started. Now I'm stumped...]

[This message has been edited by Suho1004 (edited 10-21-2002).]

Suho1004: Damn I was reading down through that and saying to myself 'I know the answer' and then I reached the bottom and lo and behold you'd already tried it. As far as I'm aware doing:

<div>

<img  src="" style="float:left;" />

<p>My content goes here.</p>

</div>

can I see the page as it could something else interfering with things?

___________________
Emps

FAQs: Emperor

Put a "dummy" DIV after the image and content with "clear" set to "both":

<div>
<img src="" style="float:left;" />
<p>My content goes here.</p>
<div style="clear:both;"></div> <!-- you should use a class for this though, not the style attribute -->
</div>

You might also just try setting the Header elements to clear:both, that might be simpler (and preferred if so).

OK, this is some weird stuff....

Giving the heading elements "clear:both" does nothing. The dummy div (set to "clear:both;") also did nothing at first, but then I gave it a 1px border to see where it was showing up--and lo and behold, we have white space! Then I took the border out and the top margin disappeared once again.

As far as I can see, clear ensures that the next box starts below the lower edge of the float. According to the specs, the top margin of the cleared box expands to ensure that it begins below the float, which would explain why I'm seeing no change in the top margin when I give the headers clear.

The dummy div, on the other hand, doesn't make sense. The browser acknowledges its presence with a border, but ignores it without a border? This strikes me as buggy implementation of something (not sure what) in IE6.

It does work with a stupid border, so I guess I could just set the border to the same color as the background and move on... but this is basically just the CSS version of tables and spacer gifs. And I thought we were getting away from that. I really just wanted to build a valid CSS/XHTML page without any rubber bands, duct tape, or chewing gum stuck to the various parts.

The page is not online yet, so I can't really show it to you. I don't have time to put it up now, maybe a little later. I might just move on, but this workaround really aggravates me, since it is so obviously not the "right" way to do it.

I know the feeling. I had to make these sorts of compromises when I made my current front page. And sometimes scripting makes it worse (though sometimes workarounds are easier when you're working with a script).

Keep trying things. Be imaginative. Usually there's something obscure that will work.

Thankfully, though, these issues are necessary not because of the medium (CSS & XHTML) but because of the browsers implementing those mediums. This is unlike table tricks, which require spacer graphics, etc, by their very nature.

Good point, Slime, and that does make me feel a little better. I think I'll just go with what works for now, experiment a little along the way, and then maybe bring the subject up again when the site goes online for review (crosses fingers), if I haven't figured it out by then.