Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1391
  • Last Modified:

drop shadow on wrapper div

I would be very grateful if someone could help me with this. Please see link:

http://www.thelittleclinic.co.uk/template2.htm

What I'm trying to do is create a drop shadow down the right hand side of the main wrapper div that will extend with the content. I've put a gradient into what will be the nav bar and that seems fine, but even though the wrapper contains all the elements it won't extend downwards. All the css is in the head section so hopefully someone can tell me what I'm doing wrong. Many thanks. Lucy.
0
lucytrustam
Asked:
lucytrustam
  • 2
  • 2
1 Solution
 
LTY83Commented:
the drop shadow will extend further when you add more content into the wrapper element. It can't extend anymore because nothing else is making its height any bigger than what it is, you cold set the height of the wrapper to 100% but i would recommend it as it can cause other issues, the only real way t make it extend is to add more content into the wrapper div
0
 
LTY83Commented:
I meant i WOULD NOT recommend setting the height 100%
0
 
lucytrustamAuthor Commented:
I did have it filled with content but it still didn't work - I've stripped it right down just to check I haven't missed off any div tags.
I've stuck a few <p>s in it now (see refreshed page) It does work in IE but not in firefox. I also tried changing the height to 100% but still no luck.
0
 
lombardpCommented:
As far as I know, the problem is the floating DIVs inside your wrapper. A pratical (not so elegant) solution is to put a not-floating DIV just after the floating ones, and give it the CLEAR:BOTH; attribute.

<div style="clear:both; font: 1px Verdana;">&nbsp;</div>

Placed after floating DIVs:

<DIV id=wrapper>

   <DIV id=banner>
   <DIV id=logo></DIV><!--//ending banner div next--></DIV>

   <DIV id=bar>
   <DIV id=acupuncture></DIV>
   <DIV id=bluebar></DIV><!--//ending bar div next--></DIV>

   <DIV id=bottomsection>
   <P><!--//ending bottomsection div next--></P>
   <P>&nbsp;</P>
   <P>&nbsp;</P>
   <P>&nbsp;</P>
   <P> </P></DIV>
   
   <div style="clear:both; font: 1px Verdana;">&nbsp;</div>

<!--//ending wrapper div next--></DIV></BODY></HTML>


clear:both; allows to place that div _AFTER_ the floating DIVs, since floating DIVs cannot flow around it. Moreover, being it a standard positioned div, it is still in the normal flow, and the wrapper DIV must comply with its position and size, so WRAPPER is extended to the end of that DIV.

Note: font: 1px Verdana; is a way to minimize the height size of that div.


0
 
lucytrustamAuthor Commented:
Sorry to take so long to get back. Got completely sidetracked with another job. This is brilliant - thank you. I had also tried setting the overflow to auto and making the wrapper relatively positioned with no offsets, but this seemed to create scroll bars in netscape where there shouldn't have been any. Will definately use this in future
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now