...

View Full Version : Positioning boxes . . .



michael180
07-19-2011, 02:18 AM
REF: http://chieftainclothing.com/test/inspiration.html

I have four boxes on this page panel1, 2, 3,4 and I would like to position 3 under 1 and 4 under 2. I tried to use the top: element but that doesn't work.

Any suggestions?

Sammy12
07-19-2011, 02:22 AM
.box { z-index: 1; }
.box2 { z-index: 2; }

the greater number will be on top

michael180
07-19-2011, 02:33 AM
REF: http://chieftainclothing.com/test/inspiration.html

I have four boxes on this page panel1, 2, 3,4 and I would like to position 3 under 1 and 4 under 2. I tried to use the top: element but that doesn't work.

Any suggestions?

Thanks Sammy, I think I miss spoke, I would like panel 3 to reside directly below panel 1, and panel 4 below panel 2, one on top of the other.

alykins
07-19-2011, 03:32 PM
what do you mean by top? top as in if you look at browser window as an X-Y axis and you want it to be higher on the Y axis? (so panel "3" will have lower left corner at origin (0,0)?)... if so then make a wrapper that is wide enough to fit panels one and two (and also three and four) and then float all of them left... if the wrapper is wider than 1+2+3 then 1,2,&3 will all float on one line. i hope this makes sense...

<"panel"1><"panel"2>
<"panel"3><"panel"4>

to do above...


#wrapper{width:400px;}
#one{width:200px; height:200px; float:left; background:blue;}
#two{width:200px; height:200px; float:left; background:green;}
#three{width:200px; height:200px; float:left; background:orange;}
#four{width:200px; height:200px; float:left; background:purple;}

<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>

michael180
07-19-2011, 08:36 PM
Thanks alykins, it works just the way I want it to. :)

Michael

michael180
07-20-2011, 08:11 PM
what do you mean by top? top as in if you look at browser window as an X-Y axis and you want it to be higher on the Y axis? (so panel "3" will have lower left corner at origin (0,0)?)... if so then make a wrapper that is wide enough to fit panels one and two (and also three and four) and then float all of them left... if the wrapper is wider than 1+2+3 then 1,2,&3 will all float on one line. i hope this makes sense...

<"panel"1><"panel"2>
<"panel"3><"panel"4>

to do above...


#wrapper{width:400px;}
#one{width:200px; height:200px; float:left; background:blue;}
#two{width:200px; height:200px; float:left; background:green;}
#three{width:200px; height:200px; float:left; background:orange;}
#four{width:200px; height:200px; float:left; background:purple;}

<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>

REF: http://chieftainclothing.com/mockup/box.html

Hi alykins, I have a question, why can't I get the forth (blue) box to show up?

alykins
07-20-2011, 08:37 PM
because you changed a floating layout to a positioning layout (what i was hinting at earlier in this thread is that using a position:absolute||relative; layout is bad)... you took the float properties away from the blocks and moved them aroound using positioing... now the purple box (the real fourth box) is over top of the first box (the fake "fourth" box... ie the blue box) :D

tracknut
07-20-2011, 08:39 PM
Also because the fourth box style stays "loat: left;" where it should say "float: left;"

But yes get rid of tall that "position" and "left" stuff too.

Dave



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum