PDA

View Full Version : putting div in lower left of parent div



sixrfan
Oct 8th, 2009, 05:15 PM
how do i get the "smile" div which has the picture of the face to appear in the lower left of the parent "content" div, and have the words wrap to the right of it?

here's the site: http://www.anneroselli.com/index1.html
and here's what i want it to look like: http://www.anneroselli.com/roselli.jpg

thanks in advance!!!

abduraooft
Oct 8th, 2009, 05:30 PM
Put that div before the <p>, like

<div id="smile"> </div>
<p>One of the highlights of Anne's career was her appearance with Johnny Carson's "Tonight Show" orchestra. Soon after, the incomparable jazz composer Neil Hefti penned her his favorite singer and a throwback to the great ladies of the 1940's.</p>

PS: I think an <img> would be more appropriate than a <div> with background-image

sixrfan
Oct 8th, 2009, 09:08 PM
thanks. that worked. there seems to be two new problems though. not sure if they're a result of that change but if you look at my footer:

1. the text in the footer is not centered

2. there's some strange line that appears below the footer. it looks like the last 3 pixels of my content section but i'm not sure what that would be doing there.

please advise. thanks so much!!!

met
Oct 8th, 2009, 11:48 PM
add



background-repeat: no-repeat;


to #footer to prevent the "strange" line. It is infact the footer background repeating itself as you've set the height to 50px but also added 3px padding, so in effect the footer is 53px high. The image is 50px high, so it shows exactly 3px too much ;)

the alternative is to make the footer 47px high, but its better to just set the bg to not repeat.

as for the text align, i'll get back to you

set:



#smile {
background-image:url(pics/anne_smile.jpg);
background-repeat:no-repeat;
clear:left;
float:left;
height:314px; /* match the height of the picture */
margin:10px 0; /*changed margins slightly */
padding-right:5px;
width:216px; /* match the width of the picture */
}


and you're good