Skip navigation
Currently Being Moderated

Help with Positioning a div in relation to another div

Jun 24, 2012 12:43 PM

I'm working on this website - http://soleproductions.com/virgilcardin/index.htm

 

I want to position the "7 Days a Week" waterdrop image just to the right of "Call Us Today..." text.

 

Here is my logic....

 

I created a div called "7daysaweek" and placed it inside the "largeimage" div and set the "largeimage" div to Relative so I could use absolute positioning of the "7daysaweek" div and set 7days div to 0 bottom, 0 right but it remains at the top left corner of the largeimage div.  What am I missing?

 

Here is my HTML

<div id="largeimage">

        <div id="7daysaweek"><img src="../images/7-days-a-week.png" width="114" height="178" alt="7 Days a Week" /></div>

    </div>

 

Here is my CSS

 

#largeimage {

    height: 409px;

    width: 900px;

    background-image: url(images/virgil-cardin-truck1-large.jpg);

    background-repeat: no-repeat;

    position: relative;

}

#7daysaweek {

    height: 178px;

    width: 114px;

    right: 0px;

    bottom: 0px;

    position: absolute;

}

 
Replies
  • Currently Being Moderated
    Jun 24, 2012 2:01 PM   in reply to StudentsofShiloh

    I cannot see the #7daysaweek position:absolute rule anywhere in your CSS.

     

    Edit: good point by Nancy. ID names cannot begin with a number. #sevendaysaweek is fine. #7daysaweek is not.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 24, 2012 1:37 PM   in reply to StudentsofShiloh

    Design View isn't reliable.  Use Live View or Preview in browsers.

     

    Leading numbers like "7" are not allowed in CSS selector names. The selector name must begin with a letter. 

     

    Try this (inline styles used here for expediency):

     

    <div id="waterDrop" style="position:absolute; top:22px; left: 800px"><img src="images/7-days-a-week.png" alt="7 Days a Week" height="178" width="114">

    </div>

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points