text align left & right at the same time

[comptech520]

How can I make

Home align on the left side
Login align on the right side

Here is my code

.path {
background: #CC0000;
color: #FFF;
font: normal 1.1em Verdana,sans-serif;
padding: 8px 12px;
}

<div class="path">
Home

Login
</div>

[scragar]

<style type="text/css">
.path {
background: #CC0000;
color: #FFF;
font: normal 1.1em Verdana,sans-serif;
padding: 8px 12px;
}
.path p{
clear: both
}
.right{
float: right;
}
.left{
float: left;
}
</style>

<div class="path">
<p class="left">left</p>
<p class="right">right</p>
<p>unstyled</p>
<p class="right">right</p>
</div>

[comptech520]

If you go back to: http://esctonline.com/new/

As for the lock image, how do I make the image and text to the right of it in the middle? The text seems to be down a little bit.

[scragar]

that's because it's cleared, remove the :
.path p {
clear:both;
}

rule to make it appear on the same line.

[comptech520]

I did, now look at it. Looks a little different. What would cause that?

[scragar]

the only difference I see is that the red bit looks a little too tall, but that's easily solved.

[comptech520]

what is the differrence between <div ID= and div CLASS=
What does the clear both mean

[scragar]

classes are expected to be reused, IDs are single use only.

clear: both
means that the element ALWAYS appears on the next line after the end of a floated element, it's useful for many things(eg footer with a floated menu?).

[comptech520]

I tried to add this to my stylesheet

.path ul {
list-style-image: url(http://www.esctonline.com/new/images/note.gif);
}

And the image never appeared.

Do you know why?

[scragar]

you don't have any list's in the path div(you do inside main in a div called navigation, which is what I think your after.

[comptech520]

yes. I am sorry.

It is for the path area.

The only problem is when I put that code there, nothing shows

[scragar]

li{
list-style-image:none;

is canceling your effects, remove it.

[comptech520]

still not working

[scragar]

#navigation ul{
list-style-image: url(http://www.esctonline.com/new/images/note.gif);
}

works fine when I put it in your CSS(although the images don't look to be in the right place)

[comptech520]

I have tried that code and nothing

[scragar]

.content li {
list-style-image:url(images/li.gif);
list-style-position:outside;
list-style-type:disc;
margin-left:18px;
}the image from this code is showing, however it's in rather a bad place...

[comptech520]

How do I make the navigation show?

I have tried what you recommended and still nothing