positioning of divs

[davikokar]

hallo,

please have a look at the picture in the attachment. There are some rectangles that represent divs. There is a container div that contains 4 colored divs. The container is centered in the browser window. The 3 div (red, pink and yellow) behave normally. The strange one is the green. It should be on top of the other but at a fix top and left distance from the container div.


Is something like that possible with css? Thanks

 

[BillyRayPreachersSon]

3 questions:

1: Which browsers do you need to support,
2: Are the 3 inner DIVs (and thus the outer DIV) a fixed height, or can they expand to be any height, and
3: Is the use of JS acceptable?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[davikokar]

1: IE7 and FF
2: The 3 inner Div can expland vertically
3: If there is not a css way is accettable

 

[blueark]

Do you mean that the green box should start a fixed distance from the top of containing div, and the other three divs should appear underneath it, with no overlap?

If that's the case, it looks like the green div may have its position set to absolute, in which case it is taken out of the document flow. Subsequent divs effectively ignore it. If this is the case, remove the absolute positioning from the green div, and consider using a margin to position it instead. For example:

<div id="Container">
    <div id="GreenBox">...</div>
    <div id="RedBox">...</div>
    <div id="PinkBox">...</div>
    <div id="YellowBox">...</div>
</div>

Css would be something like:

Container { .... }
GreenBox { margin: 3em 1em 0 3em; /* Top, Right, Bottom, Left */ }
RedBox { .... }
PinkBox { .... }
YellowBox { .... }