Solved

drop shadow on wrapper div

Posted on 2006-11-12
5
1,375 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 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

717 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