Topic: Another quickie - how to make CSS containers push others around. (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=28193" title="Pages that link to Topic: Another quickie - how to make CSS containers push others around. (Page 1 of 1)" rel="nofollow" >Topic: Another quickie - how to make CSS containers push others around. <span class="small">(Page 1 of 1)</span>\

 
Stackelberg
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

posted posted 07-09-2006 18:49

Hi guys, I have another quick question.
As in this example: http://www.fusedeffects.com/Inverse/ I have multiple containers sitting in another container. What I would like to have happen is that as one container grows, the others are pushed further down. As you can see from the example, right now they stack up under each other. Their top values are set to auto, so they would be pushed down by text sitting in the parent DIV. But, they're not pushed down by other containers. What is the basic CSS solution to this? Does it have to do with floats? This should be another simple one-word answer for the CSS pros
Thanks!

(Edited by Stackelberg on 07-09-2006 18:51)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 07-09-2006 19:54

Don't think I'm really following you, but maybe adding this:

code:
#news p { position: relative; z-index: 1; }
#newsbottom { margin-top: -150px !important; }

Stackelberg
Bipolar (III) Inmate

From:
Insane since: Jul 2006

posted posted 07-09-2006 20:01

I'm actually referring to the column on the right. If you load it again you'll see what I mean (changed the file.)
In other words, if the images there were in a CSS container, how can I make the "features" container push it down instead of overlapping it?

Just a sec, I have to modify the file.

(Edited by Stackelberg on 07-09-2006 20:05)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 07-09-2006 20:14
code:
#headfeatures, #headaffiliates, #headwatch { position: static !important; }
#sidebarcontent br { display: none; }
#sidebarcontent p { margin: 0; }

Stackelberg
Bipolar (III) Inmate

From:
Insane since: Jul 2006

posted posted 07-09-2006 20:14

Ok if you reload that link now you'll see what I mean. If the feature images were just sitting in the parent div, they'd push down the "affiliates" header in that parent div. However, when they are in a separate container they "understack". I know I could just drop the PHP include right into the parent div and solve the problem, but I'm looking for a way (for future reference) to make DIV containers block each other around.
Thanks!

Stackelberg
Bipolar (III) Inmate

From:
Insane since: Jul 2006

posted posted 07-09-2006 20:21

Thank you! I knew it was some simple piece of code again. Now I know for future ref. Thanks!

Stackelberg
Bipolar (III) Inmate

From:
Insane since: Jul 2006

posted posted 07-09-2006 20:30

Just as a quick follow-up question - I applied the margin:0px; to #sidebarcontent but IE is still giving it a slight margin. How do I work around this (minus setting a negative margin, b/c then Firefox wouldn't display it correctly, since it, by default, has no margin.) I'm sorry if these questions seem really basic and redundant but I'm just starting to learn. Thanks!

(Edited by Stackelberg on 07-09-2006 20:30)

Stackelberg
Bipolar (III) Inmate

From:
Insane since: Jul 2006

posted posted 07-09-2006 21:11

Also, is it possible to set a Z-index on an absolutely-positioned container so that it will appear BELOW a static container in the same parent DIV? (Or is it possible to set an absolutely-positioned container BELOW its parent container using z-index?)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 07-10-2006 02:51

You can't place a child below its parent (except for that one thing, don't ask), but you can place one child over another. Just take 30 seconds and try it.

Stackelberg
Bipolar (III) Inmate

From:
Insane since: Jul 2006

posted posted 07-10-2006 04:30

Ok well I did try it before I posted, but I couldn't get the one static child to stack underneath the other. It was only working when they were positioned absolutely. So I still can get it to work with two static containers. On another note, I found the problem with that margin thing, again some stupid excess syntax. I guess taking a break from the work and coming back to it is a pretty effective method of solving my own problems

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 07-10-2006 05:15

Ah, well you do need to set a position value other than static, but it need not be absolute - relative will do, and without the annoying side-effects.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu