div within a div problem

[peasepud]

Hi guys n gals,

I have a blockquote div which works fine and looks perfect for what I want until I use it within a para containing a left floated image. In these instances the blockquote drops behind the image rather than sizing itself to position alongside. Ive tried many different things, such as margins:auto etc but no joy.

Any thoughts? the CSS is:

#blockquote {
background: #ddd url(img/quote1.gif) left top no-repeat;;
border-bottom: 1px solid #EEE;
border-top: 1px solid #EEE;
color: #333;
display: block;
font-size: 0.9em;
margin-top:-12px;
margin-bottom: 6px;
padding-top:6px;
padding-bottom:6px;
}
#blockquote div {
background:url(img/quote2.gif) right bottom no-repeat;
margin-left:40px;
}

#blockquote p {
padding-left: 3px;
padding-right:20px;
}

It can be seen here >

http://www.peasepud.com/mattm4

Thanks in advance.

 

[BillyRayPreachersSon]

Your markup is completely invalid. You should not be putting DIV elements inside P elements.

Rework your HTML & CSS so that it validates correctly, and they try fixing these styling issues.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

Dan is right. Fix the markup first. And while you're at it don't forget that there actually is a blockquote element, which is semantically more correct than a div.

As for the blockquote being covered by the picture, it is not true. All the text is visible, it is only the background that is behind the picture. Same is true for the paragraph, it is just that you cannot notice it, because your paragraph does not have a background. To not have the element appear under another floated element, you need to give the second element sufficient margin. Or float it. There is no other way unfortunately.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]