?
Solved

drop shadow on wrapper div

Posted on 2006-11-12
5
Medium Priority
?
1,383 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 500 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month7 days, 22 hours left to enroll

765 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