Tucking in the floated DIV's

[brentnicholas]

Howdy all -

So I'm not exactly sure how to go about getting the objects on the page to tuck into each other neatly. I'm not sure if I shouldn't be using floats, or if I'm simply unaware of a technique to do it.

Negative margins might do it?? But wouldn't that cause scaling issues, or issues if there is more content??

The key how ever is that the lay out stay liquid so it can scale with the size of the window as it changes.

An example is here: http://www.cflhd.gov/CSSTest/Test.htm
(the design is a little funky here, but that's not as important as the issue at hand.)

The items I'm trying to have 'tuck into each other' is:

"Documents I Own" should get as close to (with margin of 1em) the items above it as possible. As you can see it's currently stopped where the "Your employees" stops.

I'd like "Team Links" to do the same as well.

Also, you can see the border around "My Links" to illustrate that the margin isn't the issue.

Any ideas?

Thanks for your time,

Brent

[Veronica]

You might try changing your layout by breaking the main content area into 3 divs.
The first would have Team E-News and Team Announcements, with Documents I Own right under them.
Then your second div would be to the right of that, with Your Employees.
Then the third would contain My Links, with Team Links right under that.

Also, in your css, make sure you take out what you tried to comment out. It made your entire page unreadable in Firefox.
If you want to comment out something in css, use /* and */at the beginning and end of the line

[Twey]

CSS comments open with /* and finish with */.

The first thing to do is remove all margins and paddings:
* {
margin: 0;
padding: 0;
}Then, add them back on as you need it.

[brentnicholas]

Veronica -

The three DIV idea worked great.... dunno why that didn't occur to me... guess I'd been staring at it just too long.

BN

[Veronica]

Glad it worked. One other thing. Take out the extra <style> and </style> tags around the css lines for IE6. Otherwise, the page doesn't display in FireFox.
<!--[if lte IE 6]>
.menu ul ul {left:-1px; margin-left:-1px;}
.menu ul ul ul.left {margin-left:1px;}
<![endif]-->