More CSS : How to devide the screen with DIVs and fill it with one of them?

N

NewsBot

1
Joined
Jan 10, 2007
Messages
43,898
Location
In The Machine
Hm... more CSS trouble :

my design looks like :

==logo=======
||*********||
||*CONTENT ||
||*********||
||*********||
=============

I need to devide the "CONTENT" area into 2 section, left|right. Left is the navigation menu, right will be content. My problem is :

1. The "CONTENT" (blue area) needs to be "almost" in the middle so it has to be 100px from top, 10px from bottom, 200px from left and 50px from right of the screen.

2. Inside "CONTENT" is devided into two sections. The left section needs to be 200px, and the right section needs to be "100%" as in "Fill the rest of it".

It seems that it isn't possible to do so?

When I put two DIVs inside the "CONTENT", with margin-left and margin-top I can set them in starting position correctly, however, if I set the "right" section to "height:100%;width:100%" it goes right off the screen to the right since it starts somewhere from the middle.

What I am trying to do :

*Menu**Content

==logo=======
||***|*****||
||***|*****||
||***|*****||
||***|*****||
=============

What I get :

==logo=======
||***|*****||*****************
||***|*****||*off screen area*
||***|*****||*****************
||***|*****||****************
=============
*************************off screen area********
************
The "content" goes off the screen ;(

I tried "margin-bottom" and "margin-right" but it doesn't seem to affect it at all.

Oh, also : The left|right (green|purple) sections are inside a parent container DIV ( position:absolute;left:0;top0;width:100%;height:100% )




More...

View All Our Microsft Related Feeds
 
Back
Top