Solved

CSS Container Div

Posted on 2007-12-02
6
1,570 Views
Last Modified: 2012-06-27
I have a container div that has two children;
Sidebar- floats left (nav buttons)
Main - float right ( main content; extends below sidebar)

I would like to place an image in the lower right corner of the container div.  The bottom of the image would align with the bottom of the main div
My current code:
      #navPic {
      clear: both;
      margin: 0px 0px 0px 0px;
      }
This code puts the top of the image equal to the bottom of the text in the main div.  The result is that I have a lot of empty space below the main div.  Any suggestions?

0
Comment
Question by:svp28
  • 3
  • 3
6 Comments
 
LVL 6

Expert Comment

by:cottsak
ID: 20394237
put this in the css for ur main div

background: #fff url(/path/to/image.jpg) no-repeat bottom right;
0
 

Author Comment

by:svp28
ID: 20400469
The image has to be in the container div.  The image is already at the bottom left.  The problem is I need the bottom of the image to be even with the bottom of the content div.
0
 
LVL 6

Expert Comment

by:cottsak
ID: 20400590
is ur problem in both IE and FF?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:svp28
ID: 20400702
Yes.

http://www.lesstallguitars.com/intro.htm

I need the image at the bottom of the green box.
0
 

Author Comment

by:svp28
ID: 20400821
I got it by adding another container div

      background: url(images/leftnavguitar.JPG) no-repeat bottom left;
      overflow: hidden;
      width: 100%
      height: 100%;
      margin: 0px 0px 0px 0px;
0
 
LVL 6

Accepted Solution

by:
cottsak earned 50 total points
ID: 20401075
if ur interested i was going to suggest a div under both the sidebar and main divs but inside the container which has the css:
clear:both;
this usually aligns the contained divs to the bottom of the container
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying 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

Suggested Solutions

Title # Comments Views Activity
DataTables Table not populating data from AJAX call 3 66
Non-Cloud Bookmark Manager 3 85
Microsoft Edge 9 102
Web Fraud scenarios to PoC F5  web fraud prevention 7 48
Foreword (May 2015) This web page has appeared at Google.  It's definitely worth considering! https://www.google.com/about/careers/students/guide-to-technical-development.html How to Know You are Making a Difference at EE In August, 2013, one …
New Relic: Our company recently started researching several products to figure out what were the best ways for us to increase our web page speed and to quickly identify performance problems that we may be having. One of the products we evaluated wa…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

808 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