Page 1 of 2

Blocks wrapping around floats have full widths

Posted: Sun Jun 03, 2007 10:33 pm
by Ambush Commander
When you float an element, text is supposed to wrap around the element. Most browsers do this properly, yay. But block elements, namely divs, don't seem to have their width adjusted to fit the area allotted by the new width. Yes, the text contents get properly pushed over, but anything intrinsic to the element itself such as a border or background image will be placed in its normal spot, usually behind the floated element.

Is there any cross-compatible way around this? display:table seems to work nicely for Firefox, but appears to cause problems for Safari and Internet Explorer. I did try a few half-hearted googles, but nothing that came up seemed relevant.

Posted: Mon Jun 04, 2007 2:14 am
by matthijs
What exactly do you want to achieve?

I understand the behavior you describe, but fail to see the problem. A block level element will (naturally) not display the same wrap-behavior as text. What is it that you want to do?

Posted: Mon Jun 04, 2007 5:31 pm
by Ambush Commander
Well, the behavior I want to emulate is a two-column layout in which one column spills into the full area after the other column runs out.

Posted: Tue Jun 05, 2007 2:47 am
by matthijs

Code: Select all

<div id="content">

<ul id="sidemenu">
  <li><a href="#">Some link</a></li>
  <li><a href="#">Some link</a></li>
  <li><a href="#">Some link</a></li>
  <li><a href="#">Some link</a></li>
  <li><a href="#">Some link</a></li>
</ul>

<h2>Title</h2>
<p>Content ...</p>
<p>Content ...</p>
<p>Content ...</p>

</div>

Code: Select all

#sidemenu { float:left; width:250px;margin:0 20px 20px 0; }
Something like this should do the trick. Or is this still not what you want?

Posted: Tue Jun 05, 2007 5:13 pm
by Ambush Commander
Won't work: try adding a border to the p tags, and you'll see what I mean.

Posted: Tue Jun 05, 2007 5:34 pm
by RobertGonzalez

Posted: Tue Jun 05, 2007 6:30 pm
by superdezign
Ambush Commander wrote:Won't work: try adding a border to the p tags, and you'll see what I mean.
It works. But why put borders on paragraphs? Maybe on the few paragraphs you may actually want to do that for nearby the floated element, add a padding to that side.

Posted: Tue Jun 05, 2007 7:41 pm
by Ambush Commander
Before I continue clarifying my predicament, let me say outright: this is an edge-case that I'm trying to work around. Float works the majority of the time: this is one of the few cases where it doesn't.

Here's my problem in full: I have a custom CSS class for fancy blockquotes. What it does is add (via background images) two quotes to the edges and adjust the internal padding so that the text falls within these quotes. The overall effect is pretty cool.

However, when I attempt to float something near said blockquote, the quote gets hidden by the float, since the text wraps around, but the width does not. I'm trying to work around this.

There are a few solutions I know of currently, none of which are very satisfactory to me:

* Use a table instead of blockquote. This is the equivalent of a semantic murder, so I won't do it

* Use display:table on blockquote. This has cross-browser issues

* Add a margin to the quote, manually adjusting its length. There is no way to implement this on a global basis: each quote will have to have said code manually added when necessary. Furthermore, if the cookie crumbles in such a manner that the quote is not affected by the float, the extra margin will look quite strange.

* Adjust the blockquote with JavaScript. This is bulky, and requires quite a bit of code.

* Turn the entire layout into two columns: float the item, but then adjust the margin on the entire body so that you get a two column layout. This is what I'm currently using (and trying to get away from)

I'm soliciting other suggestions or insights into the abovementioned techniques that will make something like this viable.

Posted: Tue Jun 05, 2007 8:15 pm
by superdezign
Oh. Well, floating, like divs, weren't originally meant to be used the way that we use them, so they do have limitations... The only one that I've every really noticed is floating an item with a border, as the border will tend to intersect when the element begins to actually wrap around the floated element.

Sounds like this is what you're dealing with... beyond "faking it" with a margin, I don't believe that there are any other sensible CSS solutions.

Posted: Wed Jun 06, 2007 10:36 am
by RobertGonzalez
@AC, how is what you are doing different than what I posted (besides you are using a block level blockquote and I am using a block level div)?

Posted: Wed Jun 06, 2007 10:42 am
by matthijs
Ambush Commander wrote:Here's my problem in full: I have a custom CSS class for fancy blockquotes. What it does is add (via background images) two quotes to the edges and adjust the internal padding so that the text falls within these quotes. The overall effect is pretty cool.

However, when I attempt to float something near said blockquote, the quote gets hidden by the float, since the text wraps around, but the width does not. I'm trying to work around this.
I still don't understand the problem. Why would the quote images be covered? Something that's floated near the blockquote should just, uh float around it..?

Do you have a screenshot of what you want (even the most simple one)?

Posted: Wed Jun 06, 2007 12:10 pm
by superdezign
Everah wrote:@AC, how is what you are doing different than what I posted (besides you are using a block level blockquote and I am using a block level div)?
When you float an element, and it has block elements that it's being floated against, the text within those elements is wrapped around the ffloated element, but the block elements themselves still extend across their entire container. So if you were to take your test page and apply...

Code: Select all

p { border: 1px solid #000; background-color: #FFF; }
... then you may see what he's talking about.[/syntax]

Posted: Wed Jun 06, 2007 12:40 pm
by RobertGonzalez
What CSS are you using for the blockquote box? I guess what I really mean to ask is how are you putting the images in the background?

Posted: Wed Jun 06, 2007 4:12 pm
by matthijs

Code: Select all

<blockquote><p>Bla bla</p><cite>Me</cite></blockquote>
Then

Code: Select all

blockquote { background:transparent url(quote.jpg) 0 0 no-repeat; padding:20px 0 0 20px; }
blockquote p { background:transparent url(quote2.jpg) bottom right no-repeat; padding:0 20px 20px 0; }
or use the cite.

This should work.

Posted: Wed Jun 06, 2007 4:26 pm
by RobertGonzalez
That is why I had asked that question. If there is another element in the blockquote then the blockquote and that other element can work together to produce the quote images and still maintain the boxy type feel.