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
Solved

drop shadow on wrapper div

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

861 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