CSS Positioning Issue

Hello,

Got Eric Meyer CSS book and read it through. Good book! However, still have an issue trying to figure out positioning without using tables.

On a typical portlet (like Yahoo!), there is a title bar and to the right, you have elements like minimize, edit, maximize, etc. How can I position these elements in a div while still having the title left aligned? The issue being, in a single div, you have left aligned area and a right aligned area in a single div?

Here is the code I'm trying. In the example below, the "Edit" element should be right aligned in the same DIV. It's not.

<html>
<head>
<STYLE>
div#left {
margin: 0;
padding: 0;
float: left;
width: 25%;
}
 
div#right {
margin: 0;
padding: 0;
float: right;
width: 74%;
}
 
.portletHeader {
border:1px solid #000000;
padding: 2px;
background: maroon;
color: white;
font-size: 16px;
font-weight: bold;
text-align: left;
}
 
.action {
color: white;
background-color: maroon;
text-decoration: none;
font-size: smaller;
}
 
.actions {
text-align: right;
}
 
.portletContent {
padding: 5px;
border:1px solid gray;
background: white;
color: black;
font-size: 14px;
}
</STYLE>
</head>
<body>

<div class="portletHeader">DWY</div><div class="portletContent">Content</div>
 
<br>
 

<div id="left">
<div class="portletHeader">DWY-Left</div><div class="portletContent">Content</div>
</div>
 <div id="right">
<div class="portletHeader">DWY-Right<span class="actions"><a class="action" href="#">Edit</a></span></div>
<div class="portletContent">Content</div>
</div>
</body>
</html>

[ October 16, 2004: Message edited by: David Yutzy ]
[ October 16, 2004: Message edited by: David Yutzy ]

The secret is to use a combination of divs and spans with the float attribute.

Here is a basic example:

Eric

Thanks for the quick reply. I got that working, now I'm trying to apply a style to the links in the "actions" span.

According to your example, I modified the code and have the following:

The style I'm using is as follows:

I'm using a CSS editor called TopStyle and in their "preview" mode, the above works as expected, but when shown in FireFox, doesn't work at all and looks like a regular link. I also tried it in IE 6.x and get the same result.

I even tried changing the "span.edit" to a simple class "edit" and couldn't get that to work. This is odd because it should work...

it would be

a.edit

a.edit:hover

Eric