Solved

drop shadow on wrapper div

Posted on 2006-11-12
5
1,359 Views
Last Modified: 2012-05-05
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
Comment
Question by:lucytrustam
  • 2
  • 2
5 Comments
 
LVL 4

Expert Comment

by:LTY83
ID: 17926134
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
 
LVL 4

Expert Comment

by:LTY83
ID: 17926221
I meant i WOULD NOT recommend setting the height 100%
0
 

Author Comment

by:lucytrustam
ID: 17926296
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
 
LVL 9

Accepted Solution

by:
lombardp earned 125 total points
ID: 17929942
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
 

Author Comment

by:lucytrustam
ID: 17980679
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Text in block not displaying properly 2 33
CSS Font Arial Narrow 2 31
jQuery detect if it is a mobile device 3 107
Message not shown 5 33
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now