# \[Semi OT\] BlindDown and a floated div

**URL:** <https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183>\
**Category:** Rails\
**Created:** [June 27, 2006, 1:49am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183 "2006-06-27T01:49:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mansfiem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/fbc32d/32.png) [@mansfiem](https://www.ruby-forum.com/u/mansfiem)\
**Post date:** [June 27, 2006, 1:49am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183/1 "2006-06-27T01:49:20Z")

</div>

I am using the drop shadow technique described at  
[http://www.1976design.com/blog/archive/2003/11/14/shadows/](http://www.1976design.com/blog/archive/2003/11/14/shadows/) to give  
several of my divs drop shadows. That part works fine.

What doesn’t work so well is when I try to BlindDown a div in Firefox  
and it ends up ignoring the content below it and just overlapping it.  
In IE this problem does not occur. In Firefox the overlapping does  
occur but when I right click or scroll down the page fixes itself so  
that the content that should have moved down to make room for the  
expanded div does move down. I have figured out that if I do not float  
the div then the Firefox problem does not occur but I need to float the  
div for the drop shadow to look correct.

I realize that the above description is probably a little hard to  
understand so I took a screen shot of what I am talking about and made a  
visual  
[http://www.mattmargolis.net/bd.gif](http://www.mattmargolis.net/bd.gif)

Any ideas as for how I can either do a drop shadow that looks like the  
above without floating a div or get BlindDown to work right in Firefox  
with floated divs would be greatly appreciated.

Thank you,  
Matthew M.  
[blog.mattmargolis.net](http://blog.mattmargolis.net)

---

<div class="post-metadata">

**Author:** ![mansfiem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/fbc32d/32.png) [@mansfiem](https://www.ruby-forum.com/u/mansfiem)\
**Post date:** [June 27, 2006, 2:11am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183/2 "2006-06-27T02:11:25Z")

</div>

There is no ‘real’ reason that it has to be floated IMO. Try making the  
containing div position: relative, and the img postition: absolute and  
see if you can get the same result. I don’t see that floating adds  
anything to the effect, but there may be other reasons you are using  
floats.

* * *

Timothy J.  
[www.foundinteractive.com](http://www.foundinteractive.com)

---

<div class="post-metadata">

**Author:** ![mansfiem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/fbc32d/32.png) [@mansfiem](https://www.ruby-forum.com/u/mansfiem)\
**Post date:** [June 27, 2006, 2:33am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183/3 "2006-06-27T02:33:14Z")

</div>

Another thing to try is to put a This  
should not allow floated content to pass the line of the span.  
Effectively  
acts like a boundary to floated elements.

---

<div class="post-metadata">

**Author:** ![mansfiem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/fbc32d/32.png) [@mansfiem](https://www.ruby-forum.com/u/mansfiem)\
**Post date:** [June 27, 2006, 2:36am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183/4 "2006-06-27T02:36:22Z")

</div>

Timothy J. wrote:

> > does occur but when I right click or scroll down the page fixes  
> > Any ideas as for how I can either do a drop shadow that looks like
> 
> * * *
> 
> Rails mailing list  
> removed\_email\_address@domain.invalid  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)  
> I can’t get a cross browser solution for the drop shadow that doesn’t  
> use the float.

.with\_shadow {  
background: url(‘…/images/shadow.gif’) no-repeat bottom right;  
width: 265px;  
position: relative;  
margin-bottom: 1em;

}

.myObject{  
width: 250px;  
border: 1px solid #a9a9a9;  
padding: 4px;  
display: block;  
bottom: 5px;  
position: relative;

}

This looks right in Firefox and works fine with the BlindDown but in IE  
there is an extra bunch of whitespace on the right side of myObject’s  
outline  
as can be seen [http://www.mattmargolis.net/badIE.gif](http://www.mattmargolis.net/badIE.gif)

Matthew M.  
[blog.mattmargolis.net](http://blog.mattmargolis.net)

---

<div class="post-metadata">

**Author:** ![mansfiem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/fbc32d/32.png) [@mansfiem](https://www.ruby-forum.com/u/mansfiem)\
**Post date:** [June 27, 2006, 2:42am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183/5 "2006-06-27T02:42:47Z")

</div>

Daniel N wrote:

> ```
> and
> On Jun 26, 2006, at 7:48 PM, Matthew M. wrote:
> > occur but when I right click or scroll down the page fixes
> > http://www.mattmargolis.net/bd.gif
> > _______________________________________________
> 
> ```
> 
> * * *
> 
> * * *
> 
> Rails mailing list  
> removed\_email\_address@domain.invalid  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)

Adding to the bottom of the partial  
that renders the divs did not fix the problem in Firefox. Thanks for  
the suggestion though, sounded like it would work.

Matthew M.  
[blog.mattmargolis.net](http://blog.mattmargolis.net)

---

<div class="post-metadata">

**Author:** ![mansfiem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/fbc32d/32.png) [@mansfiem](https://www.ruby-forum.com/u/mansfiem)\
**Post date:** [June 27, 2006, 2:46am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183/6 "2006-06-27T02:46:02Z")

</div>

you would need to clear the float after every Div, not at the end of  
them all.

I use   
 instead of spans

If this doesn’t work, try posting your code

* * *

Timothy J.  
[www.foundinteractive.com](http://www.foundinteractive.com)

---

<div class="post-metadata">

**Author:** ![mansfiem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/fbc32d/32.png) [@mansfiem](https://www.ruby-forum.com/u/mansfiem)\
**Post date:** [June 27, 2006, 2:52am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183/7 "2006-06-27T02:52:10Z")

</div>

Timothy J. wrote:

> > Rails mailing list  
> > removed\_email\_address@domain.invalid  
> > [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)
> 
> * * *
> 
> Rails mailing list  
> removed\_email\_address@domain.invalid  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)  
> Nope that didn’t seem to work either.

Here is my partial which renders the objects I am trying to drop shadow  
and BlindDown

 \<%=render :partial=\> 'pet/pet\_header', :locals =\> { :pet\_header =\> pet} %\> 

 \<%= link\_to\_remote('\>\>', :url =\> {:action =\>'show\_expanded\_pet', :id =\> pet})%\> 

  

My CSS  
.with\_shadow {  
background: url(‘…/images/shadow.gif’) no-repeat bottom right;  
clear: both;  
float: left;  
position: relative;  
margin-bottom: 1em;

}

.pet{

border: 1px solid #a9a9a9;  
padding: 4px;  
display: block;  
margin: -5px 5px 5px -5px;  
position: relative;  
}

Matthew M.  
[blog.mattmargolis.net](http://blog.mattmargolis.net)

---

<div class="post-metadata">

**Author:** ![mansfiem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/fbc32d/32.png) [@mansfiem](https://www.ruby-forum.com/u/mansfiem)\
**Post date:** [June 27, 2006, 3:43am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183/8 "2006-06-27T03:43:42Z")

</div>

Daniel N wrote:

> ```
> >
> partial
> >
> 
> </div>
> </span>
> float: left;
> margin: -5px 5px 5px -5px;
> 
> ```
> 
> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ http://lists.rubyonrails.org/mailman/listinfo/rails

Perfect! The div clearing both was just what I needed.

Thank you,  
Matthew M.  
[blog.mattmargolis.net](http://blog.mattmargolis.net)

---

<div class="post-metadata">

**Author:** ![mansfiem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/fbc32d/32.png) [@mansfiem](https://www.ruby-forum.com/u/mansfiem)\
**Post date:** [June 27, 2006, 3:37am UTC](https://www.ruby-forum.com/t/semi-ot-blinddown-and-a-floated-div/96183/9 "2006-06-27T03:37:39Z")

</div>

On 6/27/06, Matthew M. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> > Timothy J.
> > 
> > > [blog.mattmargolis.net](http://blog.mattmargolis.net)
> 
> ```
> <span style="clear:both"></span>
> 
> ```
> 
> :id =\> pet})%\>  
> clear: both;  
> display: block;  
> margin: -5px 5px 5px -5px;  
> position: relative;  
> }

I made some mods to your structure. Mostly because I didn’t want to  
fire up  
a rails app. It’s just a stand alone html file that includes prototype  
etc.

 .with\_shadow { background: url('../images/shadow.gif') no-repeat bottom right; clear: both; float: left; position: relative; margin-bottom: 1em;

}

.pet{

border: 1px solid #a9a9a9;  
padding: 4px;  
display: block;  
margin: -5px 5px 5px -5px;  
position: relative;

# Some Header

&nbsp

 Do It 

Note the last 

I tried to use   
 and this worked ok in FF but  
not in  
IE. The div seemed to work in both places.

Hope this works for you.

Matthew M.