Tim,
        Thank you, {display: block;} and {clear: left;} were exactly what
were needed.  Think I need to read some more on floats...

        Rick

-----Original Message-----
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim Climis
Sent: Tuesday, January 26, 2010 10:13 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] 2 Problems; float and link placement

On Tuesday, January 26, 2010 10:34:18 pm Rick wrote:
> Why doesn't the division extend to the bottom of the
> images?
> 

The images are floated, which means that they are "out of the flow."  
Basically that means that they don't take up any space in their parent 
container.  As a result, the link goes over the image, and the div is too 
short.

There are several solutions to this problem, depending on the situation.  
Putting a height on your div (as you mentioned) is one, or setting the div 
have overflow: hidden, will make the div extend to the bottom of the
pictures, 
but then the link will still go over the image, so those solutions aren't 
appropriate in this situation.  What *will* accomplish what you're aiming
for 
is another clear.

#banner a {
  display: block; / *add */
  clear:left; /* add */
  margin-left: -110px; /* delete */
  margin-top:200px; /* delete */
}

The display: block is necessary to make clear work on <a>.  And then clear 
left makes it go below the floated image.  Then you can get rid of your 
margins, because clear is doing all the work for you.

---Tim
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to