Relative positioning help
Moderator: General Moderators
Relative positioning help
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.
I want to do http://www.mc0.cjb.net/newlayout/absolute.html
using relative positioning.
Anyone know how? I have tried but obviously unsuccesfully.
- twigletmac
- Her Royal Site Adminness
- Posts: 5371
- Joined: Tue Apr 23, 2002 2:21 am
- Location: Essex, UK
- twigletmac
- Her Royal Site Adminness
- Posts: 5371
- Joined: Tue Apr 23, 2002 2:21 am
- Location: Essex, UK
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
Code: Select all
float: left;Code: Select all
float: right;Mac
- twigletmac
- Her Royal Site Adminness
- Posts: 5371
- Joined: Tue Apr 23, 2002 2:21 am
- Location: Essex, UK
This is what I tried to (fairly ineloquently) explain:
Mac
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>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
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