Forums

larryel

I've looked at the various 'Left Align and Right Align Text on the Same Line' discussions, but none help my particular case.
I have a footer which has copyright text left aligned in a colored box which spans the page width; this works fine. And I can right align a 'Last Update' text also, but it end up on the next line. I could make the text easily be right justified on the same line but I have this colored 'box' which I want it to appear in with the copyright text.
How do I get it to display within the colored area also? Here is the pertinent code:
-footer.html-

Here is the related CCS:
/* -- COPYRIGHT INFO -- */
#copyright {
padding: 3px 0 3px 8px;
border: 1px solid #000;
background-color: #00CCFF;
font-weight: bold;
color: #000000;
font-size: .8em;
width: 998px;
}

#copyright .alignleft {
text-align: left;
float: left;
}

#copyright .alignright {
text-align: right;
/*float: right;*/
}
/* -- FOOTER -- */
#footer {
position: relative;
bottom: 0;
left: 2px;
}

Want it to look like this:
[c2010 xxx Last Updatexx xx]
(where [ ] represents the colored footer area created by the #copyright css

but instead it looks like:
[c2010 xxx ]
Last Update

larryel

Oops: here is the html so you can read it:

</pre><div id="footer">  
  	<!--<p align="left" id="copyright">&copy; 2010 United Church of the Valley, Murrieta, CA</p> -->
	<p class="alignleft" id="copyright">&copy; 2010 United Church of the Valley, Murrieta, CA</p>
	<p class="alignright" > </p>Last Update</p>
  </div> <!-- end footer- -->

larryel

you can see this footer and what I refer to as the colored box (the #copyright css, and without the Last Update text) at: unitedchurchofthevalley.org

DogsGhost

looks like you have you have an extra closing p tag in front of Last Update.
Concerning your issue it sounds like you just want to take the styling you have for #copyright and move it to the footer, so your second paragraph is affected by that styling.

<style>
.alignleft {
	text-align: left;
	float: left;
}
.alignright {
	text-align: right;
}
/* -- FOOTER -- */
#footer {
	position: relative;
	bottom: 0;
	left: 2px;
	padding: 3px 0 3px 8px;
	border: 1px solid #000;
	background-color: #00CCFF;
	font-weight: bold;
	color: #000000;
	font-size: .8em;
	width: 998px;
}
</style>

<div id="footer">  
        <p class="alignleft">&copy; 2010 United Church of the Valley, Murrieta, CA</p>
        <p class="alignright">Last Update</p>
</div>

treehouse : what would you like to learn today?

Forums

Special Issue with Left Align and Right Align Text on the Same Line