div - relative positioning

[juane moore]

I'm having a tad bit of difficulty understanding how to get to div's to align
side-by-side.

Very very basic layout here...

I have a #header at the top of my page, 140px down I have #main section, and
just to the right of that, I would LOVE to have my #navBar. I want it all
relatively positioned.

I must be missing something within the flow of my code. I understand that if
a div is relative, it is going to position itself relevant to the div above it,
before it, or what have you in the code. So as a result, my #navBar is
positioned underneath my #main as opposed to 'next' to it on the right.

Very similar to the home page of macromedia, main content on the left, nav
column on the right.

Hope someone can shed some light.

Thanks,

[juane moore]

ps- using external css sheet to play with code.

....and the usual MX 2004, XP SP2, Dual Monitors, blood type O+

[Paul Whitham TMM]

You need to use Float to get Divs to sit along side each other. There is an
excellent series of articles on the MM Site on using CSS positioning. Go to
the Developers, Dreamweaver section and then select CSS.

--
Regards

Paul Whitham
Macromedia Certified Professional for Dreamweaver MX2004
Valleybiz Internet Design
[url]www.valleybiz.net[/url]

Team Macromedia Volunteer for Ultradev/Dreamweaver MX
[url]www.macromedia.com/support/forums/team_macromedia[/url]

"juane moore" <webforumsuser@macromedia.com> wrote in message
news:d4m61n$l84$1@forums.macromedia.com...

> I'm having a tad bit of difficulty understanding how to get to div's to

align

> side-by-side.
>
> Very very basic layout here...
>
> I have a #header at the top of my page, 140px down I have #main section,

and

> just to the right of that, I would LOVE to have my #navBar. I want it all
> relatively positioned.
>
> I must be missing something within the flow of my code. I understand

that if

> a div is relative, it is going to position itself relevant to the div

above it,

> before it, or what have you in the code. So as a result, my #navBar is
> positioned underneath my #main as opposed to 'next' to it on the right.
>
> Very similar to the home page of macromedia, main content on the left,

nav

> column on the right.
>
> Hope someone can shed some light.
>
> Thanks,
>

[juane moore]

Thanks for the speedy reply!

Actually, I read through this tutorial:

Introduction to CSS Positioning in Dreamweaver MX 2004
Learn how to use absolute, relative, and static positioning to lay out your
pages with CSS.

None of the examples show how to position side-by-side, or FLOAT as you say.

That is where I picked up on the flow of the code...

[Paul Whitham TMM]

Go to this page

[url]http://www.macromedia.com/devnet/mx/dreamweaver/css.html[/url]

and you will see the 6 articles. It pays to work from the top, but Part 2 &
Part 4 are the most relevant to what you want

--
Regards

Paul Whitham
Macromedia Certified Professional for Dreamweaver MX2004
Valleybiz Internet Design
[url]www.valleybiz.net[/url]

Team Macromedia Volunteer for Ultradev/Dreamweaver MX
[url]www.macromedia.com/support/forums/team_macromedia[/url]

"juane moore" <webforumsuser@macromedia.com> wrote in message
news:d4m757$ms3$1@forums.macromedia.com...

> Thanks for the speedy reply!
>
> Actually, I read through this tutorial:
>
> Introduction to CSS Positioning in Dreamweaver MX 2004
> Learn how to use absolute, relative, and static positioning to lay out

your

> pages with CSS.
>
> None of the examples show how to position side-by-side, or FLOAT as you

say.

>
> That is where I picked up on the flow of the code...
>

[juane moore]

Thank you for the post... I read from top to bottom as you recommended and now
am familiar with floating divs...

I have another problem however, my layout is as follows:

<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="navBar"></div>
</div>

I have a space in between the header div and the main div. Its a single line.
There is no code in between the two. How do I get rid of it?

In the tutorials I read, there existed usage of <div id="clear"></div> after
certain divs, but do not understand what the purpose of them is. Could this be
the solution to clearing up that space?

Thanks