Blocks wrapping around floats have full widths

JavaScript and client side scripting.

Moderator: General Moderators

matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

For a valid strict doctype a blockquote must contain a block level element. Like one or more paragraphs <p>. For short inline quotations, one should use the q element.

See also http://www.456bereastreet.com/archive/2 ... quotes/for a good discussion.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

To see the problem I am describing and some of the unsatisfactory solutions that fix it, see:

http://www.thewritingpot.com/scrap/2007 ... block.html

@Everah: Our two cases are exactly the same, and both exhibit the undesirable behavior. The only difference is that in my case, CSS styling makes the behavior visible.

Also, the CSS is available on the HTML Purifier website, the relevant section is copied below:

Code: Select all

blockquote.fancy {
  background: transparent url(quote-left.png) left top no-repeat;
}

blockquote.fancy div.quote {
  background: transparent url(quote-right.png) right bottom no-repeat;
  padding: .5em 48px .5em;
}

blockquote.fancy div.origin {
  text-align: right;
}
In this case, the specific implementation details suggests that we may be able to get the effect we want by placing the left quote in an inline element. I haven't the foggiest how this would be done though, since the margins would still need to be adjusted.

@superdezign: You've got it quite on the nose. However, you're answer isn't very helpful! :-) Maybe someone else will have another idea. I think that the display:table technique has some promise, but more research is necessary.

@matthijs: I am very well of the Strict doctype stipulations on blockquote (I had to write custom code in HTML Purifier in order to clean up inline data inside blockquotes!) At risk of further going off topic, I would advise against the usage of <q> tags pending better browser support for them. In some XHTML post-processing software I wrote, I specifically convert q tags to curly quotes in the final document.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Well, when it comes to stuff in CSS that doesn't work how we'd like it to, we make little exceptions to our CSS. You either use the display: table (a property I've never had reason to touch :P), or just make an "exception" class that defines a margin, and is applied only to elements that are defined against the floated elements. You could even have it defined through server-side code that automatically does it to the first few paragraphs.

I've never used display: table, but it doesn't sound like it'd produce the same affect from browser to browser. (Though, I could be wrong)

Or, we could just not use borders. ;)
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

A smidgen of JavaScript to fix the browser quirks wouldn't be too unpalatable for me, really. But it has to be small.
I've never used display: table, but it doesn't sound like it'd produce the same affect from browser to browser. (Though, I could be wrong)
Precisely the trouble.
Or, we could just not use borders.
Or backgrounds for that matter. ;-) Quite a dull blockquote, methinks.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Ooooh. Oh. I played around with your CSS and saw what you were referring to.

So, at least I know the reason. The element extends, but the text does not. However, the background is on the element, which is behind the floated boxes. Thus, we have a problem. :-p (Sorry, I've been thinking it was something else that was unnecessary, but this is totally different!)


Okay, as of now, I'd go with an exception, but I'm going to be playing around with that CSS for quite a while. Hopefully, I can come up with something less... forced. But if I can't, here's what I've got:

Code: Select all

<blockquote class="fancy exception">

Code: Select all

exception { margin-left: 19em;}
Sadly, it looks like this will be your solution. The display: table shrinks the quote down to the size of the blockquote's content (which actually doesn't look bad, though it should be centered), and will probably look different cross-browser.


If the website didn't look soooo much better with the text wrapped, this wouldn't be an issue. :-p

I'll keep looking into it. I'm sure there's something...
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Well, display: table is that "something." It's technically a sort of hack and will look a little different between browsers, but not much. They fake the browser's table rendering and every browser (worth using) supports tables.

Or... just keep the intro separate. (Did you just make that change? That wasn't there a few minutes ago. :-p)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I think you just have to accept that the CSS model works as it works. The behavior as you show in your example is just the behavior you get with CSS. I don't see a browser quirk here. What you call undesirable is just undesirable for you in this situation. The third example, with the margins does work nicely doesn't it? Float the first element to the left, give the second a left-margin. Or float the second as well, accepting that you need to give it a width.

And what was the problem with the blockquotes?

Code: Select all

<div class="float"><blockquote><p>This is floated</p></blockquote></div>

Code: Select all

blockquote {margin:0;padding:20px;background:#fff url(quote.gif) top left no-repeat;}
blockquote p {color:#000;}
Seems to work fine?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Correct me if I'm wrong... this is what you are after, correct:
Image
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

No. The float is any plain old block element with float: left; assigned to this (in my case, it's a div). The blockquote is inside your content "block".

If content is just text, your diagram is exactly the behavior that happens. If the content contains block-level elements, like blockquote, there borders will overlap with the float.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I am not sure that you will be able to do what you want. You basically are asking to lay a block level element inside another block level element and have the outer element wrap its entire block around the inner element. The block content will do it, but the block will not. I think.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

@matthijs: I didn't answer your comment, sorry. You're right: the behavior I am seeing right now probably is what is mandated by the CSS specification. That doesn't mean too much to me though: I know what behavior I want, and I can't seem to get it.

The margin approach has two (minor) problems:

* If the width and margins of the floated box have different units, its nigh impossible to set a single margin for the block element (this happens frequently with percentages and pixels/ems)

* Any block element close to a float needs special, one-time-only CSS styling to get the desired effect. If the float is particularly long, there is no way of figuring out whether or not the block element is affected by the float

Finally, there's no problem with blockquotes per-say.

@Everah: Your phrasing still confuses me, but I think you've got the basic gist of it. To reword, I am asking to lay a block level element near a float and have it wrap around the float.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Ambush Commander wrote: @Everah: Your phrasing still confuses me, but I think you've got the basic gist of it. To reword, I am asking to lay a block level element near a float and have it wrap around the float.
I understand it now. But I'm afraid that's just impossible. A block-level element is a block. It will never wrap around other elements.

Having said that, I am sure that what you want to do is possible. Just not the way you envision it now.

Maybe you (/we) should go back to the drawing board. What is it exactly what you want to style? What (semantic) elements do you have on the page? How can you style them the way you want it to look? The way I see it now, with the minimal amount of info I have, is that you basically have a block on the left with a load of content (headers, paragraphs) right of it/around it. That's pretty basic. Is the image Everah showed like what you want?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I agree with matthijs, blocks don't wrap around blocks.

Do you have a demo of the blockquote you are working with now that is not working the way you want it to? Perhaps we can look at what you have and mess with the markup/CSS to make this thing work out.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

I understand it now. But I'm afraid that's just impossible. A block-level element is a block. It will never wrap around other elements.
Alright. So we won't be able to the behavior we want with blocks. But tables do exactly what we want them to: they act like blocks but are stretchy and are affected by floats.
Do you have a demo of the blockquote you are working with now that is not working the way you want it to?
I think the test case page is sufficient. I think what we have to do is the last technique, display:table, cross-browser compatible, and we'll be golden.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Alright. So we won't be able to the behavior we want with blocks.
Why not?
But tables do exactly what we want them to: they act like blocks but are stretchy and are affected by floats.
What I see is a block floated to the left and a block next to it. That second block could be floated opposite or given a margin-left. What is the problem then?

Sorry this isn't going so easy, I really want to help here..
Post Reply