Simple Problem Seeks Simple Solution

[Hooded_Villian]

Here is my main layout.
<!-- Main content section --><div id="mainContent">

#mainContent {
background-color: #FFFFFF;
width: 970px;
padding: 10px;
float: left;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

Here is the section I am having trouble with. Its a grey box that spans the width of the #mainContent. I want the .sentInfo to align to the left and the .reportFake to align to the right. The .reportFake, however, follows the properties of the .sentInfo


*update: I went and changed a few things, and still no luck.


<p class="sentInfo"><img src="icons/sentin.gif" class="sentIcon" />sent in by: alexis on 24th May 2008<span class="reportFake"><img src="icons/fake.gif" class="fakeIcon" />report fake</span></p>

.sentInfo {
font-size: 10px;
background-color: #CCCCCC;
margin-bottom: 25px;
}

.reportFake {
font-size: 10px;
text-decoration: none;
text-align: right;
}

[WebJoel]

Not very elegant, but this seems to work:

<style>
#mainContent {
background-color: #FFFFFF;
width: 970px;
padding: 10px;

border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

.sentInfo {
font-size: 10px;
background-color: #CCCCCC;
margin-bottom: 25px; float:left;border:1px solid red; width:100%; position:relative;
}

.reportFake {
font-size: 10px;
text-decoration: none; position:absolute; right:0;

}
</style>

[Hooded_Villian]

Thanks a million. Always wondered wat all those extra options in CSS were for. Hahaha... Its not the neatest looking, but does the trick. Will see if I can play around with a few line heights or something.