Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Positioning boxes . . .

    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?

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    .box { z-index: 1; }
    .box2 { z-index: 2; }

    the greater number will be on top

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by michael180 View Post
    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.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,823
    Thanks
    42
    Thanked 199 Times in 198 Posts
    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...
    Code:
    <"panel"1><"panel"2>
    <"panel"3><"panel"4>
    to do above...

    Code:
    #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>
    Attached Thumbnails Attached Thumbnails Positioning boxes . . .-delete.png  

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • The Following 2 Users Say Thank You to alykins For This Useful Post:

    LilyEntrust (07-19-2011), michael180 (07-19-2011)

  • #5
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Thanks alykins, it works just the way I want it to.

    Michael

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by alykins View Post
    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...
    Code:
    <"panel"1><"panel"2>
    <"panel"3><"panel"4>
    to do above...

    Code:
    #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?
    Last edited by michael180; 07-20-2011 at 07:25 PM.

  • #7
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,823
    Thanks
    42
    Thanked 199 Times in 198 Posts
    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)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,348
    Thanks
    11
    Thanked 289 Times in 288 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •