Relative positioning help

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Relative positioning help

Post 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.
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

Could you just float one to the left and the other to the right?

Mac
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post 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?
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

You could probably just have a statement of:

Code: Select all

float: left;
in the style definition for one box and then in the other

Code: Select all

float: right;
to have one on each side of the screen.

Mac
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

I will mess with that. If I cannot figure it out can you provide example of float in use?
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

This is what I tried to (fairly ineloquently) explain:

Code: Select all

<html>
<head>
<style>
DIV#box1 &#123; float: left; &#125;
DIV#box2 &#123; float: right; &#125;
DIV &#123; border: 1px solid #000000; margin: 10px; width: 20%;&#125;
</style>
</head>
<body>
<div id="box1">Test1</div>
<div id="box2">Test2</div>
</body>
</html>
Mac
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Thanks a bunch.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post 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 ;)
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post 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!
Post Reply