Blocks wrapping around floats have full widths
Moderator: General Moderators
- 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
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.
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.
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
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; }
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
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.
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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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..?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.
Do you have a screenshot of what you want (even the most simple one)?
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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...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)?
Code: Select all
p { border: 1px solid #000; background-color: #FFF; }- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Code: Select all
<blockquote><p>Bla bla</p><cite>Me</cite></blockquote>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; }
This should work.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA