Page 1 of 1
Relative positioning help
Posted: Sun May 18, 2003 9:51 am
by nigma
Hey, I am using relative positioning with my div boxes in my stylesheet. I want to get two div boxes on the same line basically.
I want to do
http://www.mc0.cjb.net/newlayout/absolute.html
using relative positioning.
Anyone know how? I have tried but obviously unsuccesfully.
Posted: Sun May 18, 2003 2:18 pm
by twigletmac
Could you just float one to the left and the other to the right?
Mac
Posted: Sun May 18, 2003 2:23 pm
by nigma
I don't know what float means ? I know what the definition is but I have no idea how to float a CSS div box?
Posted: Sun May 18, 2003 2:37 pm
by twigletmac
You could probably just have a statement of:
in the style definition for one box and then in the other
to have one on each side of the screen.
Mac
Posted: Sun May 18, 2003 2:44 pm
by nigma
I will mess with that. If I cannot figure it out can you provide example of float in use?
Posted: Sun May 18, 2003 2:49 pm
by twigletmac
This is what I tried to (fairly ineloquently) explain:
Code: Select all
<html>
<head>
<style>
DIV#box1 { float: left; }
DIV#box2 { float: right; }
DIV { border: 1px solid #000000; margin: 10px; width: 20%;}
</style>
</head>
<body>
<div id="box1">Test1</div>
<div id="box2">Test2</div>
</body>
</html>
Mac
Posted: Sun May 18, 2003 2:57 pm
by nigma
Thanks a bunch.
Posted: Sun May 18, 2003 3:10 pm
by nigma
Trouble in paradise! I put two pages together, one with absolute possitioning, one with relative using float.
Relative:
http://www.mc0.cjb.net/cssspec/relative.html
Absolute:
http://www.mc0.cjb.net/cssspec/absolute.html
I want the relative to look like the absolute, just having the last link (titled "Login") to have its own div box.
Here are my relative css div boxes that are messed up that should be next to each other:
#TopNav
{
margin: 0px 250px 0px 2px;
padding: 1px;
border: solid 2px #eee;
color: white;
background-color: #326698;
font-family: "Trebuchet MS", Trebuchet, Arial, Geneva, sans-serif;
float: right;
}
#Login
{
float: left;
margin: 0px 2px 0px 10px;
padding: 5px;
font-size: 10px;
}
I have never used floats, like you can probably tell

Posted: Sun May 18, 2003 3:40 pm
by nigma
Got it! Woohoo! Thanks so much for that example, it took my a while but I figured out that my margins were way off. Thanks again!