File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes CSS Positioning Issue Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "CSS Positioning Issue" Watch "CSS Positioning Issue" New topic
Author

CSS Positioning Issue

David Yutzy
tumbleweed and gunslinger
Ranch Hand

Joined: Jun 29, 2001
Posts: 192
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.



[ October 16, 2004: Message edited by: David Yutzy ]
[ October 16, 2004: Message edited by: David Yutzy ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
The secret is to use a combination of divs and spans with the float attribute.

Here is a basic example:



Eric
David Yutzy
tumbleweed and gunslinger
Ranch Hand

Joined: Jun 29, 2001
Posts: 192
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...
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
it would be

a.edit

a.edit:hover

Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: CSS Positioning Issue
 
Similar Threads
Need help editing some css if possible (SOLVED)
center a div inside a div
white-space nowrap and DOCTYPE
Problem hiding div within div
Absolute Position in IE