Welcome to WebmasterWorld Guest from 34.229.194.198

Forum Moderators: not2easy

Message Too Old, No Replies

floating in IE and firefox for dummies

I am failing to even do the simplest foating div.

     
11:17 pm on Jun 5, 2008 (gmt 0)

New User

10+ Year Member

joined:June 5, 2008
posts: 1
votes: 0


I know nothing about css and html really. I need to do a lot of work on a web site for the business I work for. Hopefully this forum can help.

I am just interested in positioning blocks of material within other material, and was doing the most basic test. Even this test doesn't work the same in IE6 and Firefox 1.5

In IE6 the floated material does what I expect; it floats right. (If I understand that correctly). In firefox it doesn't.

This is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#parentbox {
position: absolute;
width: 200px;
float: right;
border: solid #ffffff 10px;
background-color: #cc9966;
text-align: center;
}
</style>
</head>

<body>
Hello There. I am just testing this little page. How do you suppose it will work.
<div id="parentbox">
<a href="example.com">link #1</a><br>
<a href="example.com">link #2</a><br>
<a href="example.com">link #3</a><br>

I am sure that you will find it interesting.
</div> Or, maybe you'll just get a migraine.

</body>
</html>

12:38 am on June 6, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


You've set the position to be absolute :)

Remove it and both will float to the right hand side.

The reason why Firefox is not positioning the box to the right is because it has been absolutely positioned. This means it will ignore float declarations and set a default

left
and
top
positions (by default, they are the same X,Y coordinates as if the element were still in the natural document flow.) This is correct behaviour.

Hope that helped clear things up :)

P.S. Welcome to Webmaster World! Hope you've read the two sticky posts at the top of the CSS forum, they can help you out.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members