Blocks wrapping around floats have full widths

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Blocks wrapping around floats have full widths

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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?
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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?
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Won't work: try adding a border to the p tags, and you'll see what I mean.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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)?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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)?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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]
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
Post Reply