Newbie question about proper use of float and DIVs

[d1m1]

Hi everyone, first post around here.
I'm trying to learn about proper use of CSS, and in doing so, I found a problem with a formatting of a table cell I need to design for work:

The table cell contains a number of div tags which should be centered (in the cell), and should appear like this

Left Center top Right top
Center bottom Right bottom

The main idea I had was to enclose the center and right divs into another div, and use float: left on every "main" div to make them appear side-by-side, and as closer to each other as possible (so that some of the content of one DIV overlaps with the other DIV next to it). The code I'm using is this (please ignore the fact that the CSS is inline and to a certain extent, the width values, I'm just using those to test):

<div style="padding: 0; margin: 0 auto; width: 299px; text-align: center; border: #000000 1px solid;">
	global
	<div style="float: left; border: #ff0000 1px solid; width: 15px;">
		left
	</div>
	<div style="float: left; border: #00ff00 1px solid; width: 50px;">
		<div>
			center top
		</div>
		<div>
			center bottom
		</div>
	</div>
	<div style="float: left; border: #0000ff 1px solid; width: 30px;">
		<div>
			right top
		</div>
		<div>
			right bottom
		</div>
	</div>
</div>

The problems I'm having are that:
1. I can't get the DIVs to overlap
2. The DIVs are not centered (i.e.: the global DIV is not centering them inside it)
3. I'm not exactly sure about having "float: left;" in every "main" DIV (is it correct, I mean?)
4. All of them are aligned to the left (direct consequence of having "float: left"?)

Thanks in advance for any help. I'm sure I can understand CSS better like this.

 

[ChrisHunt]

What content are you going to insert into this assemblage of divs? If it's tabluar data, you should use a table rather than all this floating (it may be the best way to do it anyway.)

1. I can't get the DIVs to overlap

They sit side-by-side (under your "global" text), is that not what you want?

2. The DIVs are not centered (i.e.: the global DIV is not centering them inside it)

Giving the outer div [tt]text-align: center[/tt] does just that: centres text. It won't make left-floated elements move to the centre. What you need is an element which encloses the floated elements and is as wide as the three of them altogether. Unfortunately, it's not easy to construct such an element in a cross-browser way.

Fortunately, you don't need to. You know how wide the outer box is. You know how wide the inner ones are. So just give the left-most box enough left-margin to center the three boxes. In your case it's 99 pixels: (299 - (17+52+32))/2 (remembering to add 2 pixels to each box for the borders). You'll also have to add [tt]display:inline[/tt] to the leftmost div to handle an IE6 bug.

3. I'm not exactly sure about having "float: left;" in every "main" DIV (is it correct, I mean?)

It's valid. It's only "correct" if it does what you want to do.

4. All of them are aligned to the left (direct consequence of having "float: left"?)

Yup, that's what [tt]float:left[/tt] does, floats things to the left.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd