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: [email protected]
[mailto:[email protected]] On Behalf Of Tim Climis
Sent: Tuesday, January 26, 2010 10:13 PM
To: [email protected]
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 [[email protected]]
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 [[email protected]]
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/
