Web Design Forums

dougmays · 15-10-2006, 17:51

why does float have to be used in this example. why cant you just set right and top to zero to have it sit in the top right corner of a div?

<html>

<head>
<style>

.one{width:500px; height:300px; border:1px black solid;}
.two{width:100px; height:100px; border:1px red solid; position:relative; right:0px; top:0px; float:right;}
</style>
</head>

<body>

<div class=one>
test1
<div class=two>test2</div>

</div>

</body>

</html

freelancr · 15-10-2006, 18:16

change position to absolute or fixed, get rid of the float, and it should do?

dougmays · 15-10-2006, 19:48

i haven't tried fixed...absolute is the whole screen. is there a way to do absolute inside of an area such as a div?

freelancr · 15-10-2006, 20:14

<div id="container">
<div="test">Top Right</div>
</div>

#container {
position:relative;
}
#test {
position: absolute;
}

dougmays · 15-10-2006, 20:21

wait...can you explain that to me? you may have just showed me soemthing i've been looking to do for awhile. i'd really appreciate it

freelancr · 15-10-2006, 20:54

Ok, "position:absolute" will take the element out of the normal flow of the XHTML document, and place it where you set it in the css, in relation to the nearest parent that is set as "position:relative".

By default, the only element on a page that is set as "postion:relative" is the <body> tag. So if you just stick a div into the xhtml, and set the "position:absolute", it will position itself against the entire page.

Now if you put your "position:absolute" element inside another div that has its "position:relative", it will position itself against that.

I avoid using "position" as much as possible, wont use it unless there is another way. Can set off some nasty bugs in different resolutions/browsers. Or at least I assume there is, I was really put off by using it when I was first learning CSS.

dougmays · 15-10-2006, 21:58

wow thanks alot! i've been wondering how i can do that. i've never had any problems with browsers messing up due to the position feature. do you hvae an example?

thanks again

15-10-2006, 17:51	#1 (permalink)
dougmays Registered User Join Date: Oct 2006 Location: Ft. Lauderdale, FL. Posts: 90	positioning question why does float have to be used in this example. why cant you just set right and top to zero to have it sit in the top right corner of a div? <html> <head> <style> .one{width:500px; height:300px; border:1px black solid;} .two{width:100px; height:100px; border:1px red solid; position:relative; right:0px; top:0px; float:right;} </style> </head> <body> <div class=one> test1 <div class=two>test2</div> </div> </body> </html

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

15-10-2006, 18:16	#2 (permalink)
freelancr Senior Member Join Date: Oct 2006 Posts: 2,313	change position to absolute or fixed, get rid of the float, and it should do?

15-10-2006, 19:48	#3 (permalink)
dougmays Registered User Join Date: Oct 2006 Location: Ft. Lauderdale, FL. Posts: 90	i haven't tried fixed...absolute is the whole screen. is there a way to do absolute inside of an area such as a div?

15-10-2006, 20:14	#4 (permalink)
freelancr Senior Member Join Date: Oct 2006 Posts: 2,313	<div id="container"> <div="test">Top Right</div> </div> #container { position:relative; } #test { position: absolute; }

15-10-2006, 20:21	#5 (permalink)
dougmays Registered User Join Date: Oct 2006 Location: Ft. Lauderdale, FL. Posts: 90	wait...can you explain that to me? you may have just showed me soemthing i've been looking to do for awhile. i'd really appreciate it

15-10-2006, 20:54	#6 (permalink)
freelancr Senior Member Join Date: Oct 2006 Posts: 2,313	Ok, "position:absolute" will take the element out of the normal flow of the XHTML document, and place it where you set it in the css, in relation to the nearest parent that is set as "position:relative". By default, the only element on a page that is set as "postion:relative" is the <body> tag. So if you just stick a div into the xhtml, and set the "position:absolute", it will position itself against the entire page. Now if you put your "position:absolute" element inside another div that has its "position:relative", it will position itself against that. I avoid using "position" as much as possible, wont use it unless there is another way. Can set off some nasty bugs in different resolutions/browsers. Or at least I assume there is, I was really put off by using it when I was first learning CSS.

15-10-2006, 21:58	#7 (permalink)
dougmays Registered User Join Date: Oct 2006 Location: Ft. Lauderdale, FL. Posts: 90	wow thanks alot! i've been wondering how i can do that. i've never had any problems with browsers messing up due to the position feature. do you hvae an example? thanks again

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)