DIV problems

[OzWolf]

Greetings,

I have recently started teaching myself CSS and in particular DIVs in an attempt to move away from the inflexibility of frames.

I am trying to setup a page that is somewhat complicated and in trying to get the positioning right, it just doesn't want to work for me.

Here is the DIV statements:

<div name=&quot;menu&quot; style=&quot;left: 0%; top:0%; right:16%; position:absolute;&quot;>
</div>

<div name=&quot;main&quot; style=&quot;left: 16%; top:0%; right:100%; position: absolute;&quot;>

<div name=&quot;status&quot; style=&quot;left:0%; top:0%; right: 49%; bottom: 49%; position: absolute;&quot;>
</div>

<div name=&quot;pos_list&quot; style=&quot;left:51%; top:0%; right: 100%; bottom: 49%; position; absolute;&quot;>
</div>

<div name=&quot;news&quot; style=&quot;left:0%; top:50%; right: 49%; position: absolute;&quot;>
</div>

<div name=&quot;events&quot; style=&quot;left: 51%; top: 50%; right: 100%; position: absolute;&quot;>
</div>
</div>

Now, the layout of MENU and MAIN works properly, however, the two lower sub-divs of NEWS and EVENTS don't sit in the position they're supposed to, instead overlaying the top divs of STATUS and POS_LIST

What am I doing wrong? Am I trying something that is not possible with DIVs? I've tried everything. I don't want to use a table to format the layout.

I'm sorry if this has been asked a thousand times before, but I don't really know what to search on (only self-teaching myself as it is), so I went for this passage.

Cheers,

OzWolf

 

[OzWolf]

Ok, just figured out what I was doing wrong. Shouldn't walk away from a project for two weeks 'cause you forget what you had originally done

 

[Guest_imported]

OK SO WHAT DID YOU DO?

 

[OzWolf]

Well, what I thought I'd done wrong didn't work so well, but I've figured out a workaround to fix it.

Here is the new code:

1) I set the width value of the CSS Div MAIN.

<div id=&quot;menu&quot; style=&quot;left: 0%; top: 0%; right: 16%; width: 16%; position: absolute;&quot;>
</div>

<div id=&quot;main&quot; style=&quot;left: 16%; top: 0%; right: 100%; width: 84%; position: absolute;&quot;>

<div id=&quot;status&quot; style=&quot;left: 0%; top:0%; right: 49%; width: 49%; position: absolute;&quot;>
</div>

<div id=&quot;pos_list&quot; style=&quot;left: 25%; top: 0%; right: 100%; width: 49%; position: relative;&quot;>
</div>

<div id=&quot;news&quot; style=&quot;left: 0%; top: 100%; right: 49%; width: 49%; position: absolute;&quot;>
</div>

<div id=&quot;events&quot; style=&quot;left: 51%; top: 100%; right: 100%; width: 49%; position: absolute;&quot;>
</div>

</div>

Now, I don't know exactly what I did, but I am assuming it has something to do with the position: relative call. If I understand that correctly, that forces the next DIV to proceed it down the page, which effectively works as a line feed between the first two and second two DIVs. I could be wrong and if I am, I'd like somebody to point it out.

However, I still can't understand why I have to set the left position as 25% to get the POS_LIST div at the 50% mark of the MAIN div?

Any further clarification welcomed.

Cheers,

OzWolf

 

[starway]

This:
[tt]
left: 25%; top: 0%; right: 100%; width: 49%
[/tt]
is definitely an error, because 100-25 will never be 49.

I think that you try to &quot;overcontrol&quot; everything but it doesn't work, especially if there are mistakes. It seems useless to specify both left/right and width values.

 

[Cadwalader]

Try putting the &quot;position: absolute;&quot; in the beginning of the STYLE statement...

<div id=&quot;menu&quot; style=&quot;POSITION: ABSOLUTE;left: 0%; top: 0%; right: 16%; width: 16%;&quot;>
</div>

Like that. In Netscrape Navigator, especially, little things like that can give you a brain cramp. Hope that helps!