aligning stuff in a div

float:left;---<p>---float:right;

[brdwlsh]

can't seem to get the #rightpic to stay inline with the #leftpic and <p>. i think it has something to do with the 'clear:' property. thanks for looking.

sample code:

CSS

#pinkfield {
width: 100%;
height:95px;
background-color: #936;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
#leftpic {
float:left;
margin:0 15px;
 }
p.quote{
font-family:courier, "courier new", serif;
font-size:14px;
font-weight:900;
 color:#FFF;
letter-spacing:1px;
margin:0;
padding:0;
 }
#rightpic {
float:right;
margin:0 15px;
}

HTML

<div id="pinkfield">
<img id="leftpic" src="#" width="205" height="75">
<p class="quote">
Text...centered in the<br />
middle of the page,<br />
floated images on both sides.
</p>
<img id="rightpic" src="#" width="105" height="75">
</div>

[D_Blackwell]

Try changing the order. Put in the floats, and then let the <p> slide into place.

<div id="pinkfield">
<img id="leftpic" src="#" width="205" height="75">
<img id="rightpic" src="#" width="105" height="75">
<p class="quote">
Text...centered in the<br />
middle of the page,<br />
floated images on both sides.
</p>
</div>

[brdwlsh]

that did it, thanks.