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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Location
    San Diego, CA
    Posts
    107
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS: Four Square Layout

    Is this possible with CSS?




    All squares must have the same width. Orange squares should stretch to make it so each has the same height as the other... Same with purple.

    I've tried absolute positioning, floating, etc but haven't gotten exactly the above.
    Last edited by sumeet; 05-18-2005 at 06:17 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    EDIT - Updated it - should be more what you want!

    Code:
    <head>
    
    <style type="text/css">
    
    #wrap { 
    width: 300px;
    height: 300px;
    }
    
    #a { 
    background-color: #FC6;
    display: inline;
    width: 50%;
    height: 50%;
    }
    
    #b { 
    background-color: #C0C;
    float: right;
    display: inline;
    width: 50%;
    height: 50%;
    }
    
    #c { 
    background-color: #FC0;
    clear: both;
    display: inline;
    width: 50%;
    height: 50%;
    }
    
    #d { 
    background-color: #F0C;
    float: right;
    display: inline;
    width: 50%;
    height: 50%;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="wrap">
    
    <div id="a">
    </div>
    <div id="b">
    </div>
    <div id="c">
    </div>
    <div id="d">
    </div>
    
    </div>
    </body>
    Hopefully it helps! .. EDIT ... oer it doesn't work in FF soz !
    Last edited by mark87; 05-18-2005 at 06:38 PM.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Not sure if this is totally correct way to do it but it is something like and is the same in FF

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    style type="text/css">

    #wrap { 
    width300px;
    height300px;
    }

    #a { 
    background-color#FC0;
    width50%;
    height50%;
    floatleft;
    }

    #b { 
    background-color#FC6;
    width50%;
    height50%;
    floatleft;
    }

    #c { 
    clearboth;
    background-color#F0C;
    width50%;
    height50%;
    floatleft;
    }

    #d { 
    background-color#C0C;
    float:left;
    width50%;
    height50%;
    }

    </
    style>

    </
    HEAD>
    <
    BODY>

    <
    div id="wrap">

    <
    div id="a">a</div>
    <
    div id="b">b</div>
    <
    div id="c">c</div>
    <
    div id="d">d</div>

    </
    div>


    </
    BODY>
    </
    HTML
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    San Diego, CA
    Posts
    107
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks a lot for the help. Unfortunately, not exactly correct.

    With the first suggestion, A is next to C and B to D. Also, widths arent present for A and C.

    With the second suggestion, the image I offered in my post is indeed replicated, but by using the 'height: 50%;' element you restrict my text. I need it so that it doesn't matter how much text I have in either box. The adjacent box should stretch to match heights.

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yup sorry my attempt wasn't too good! I don't think you'll be able to get them to both stretch like that tbh, maybe easier just to make sure the percentages are the same each time...

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://home.earthlink.net/~harbinger...ng/sumeet.html

    maybe something like that?

    Not 100% CSS as it uses 2 images but...

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    I think the method harbingerOTV has used is the way to do it

    I was only going to post a similar code.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    New Coder
    Join Date
    Apr 2005
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Damn, I was just about to post some code a wrote.

  • #9
    Regular Coder
    Join Date
    Apr 2005
    Location
    San Diego, CA
    Posts
    107
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks that does indeed work.

    I won't be able to use it for the project I'm working on (submission to CSS Zen Garden) because the structural coding is different, but I can definitely implement that on another website.

    Thanks again.


  •  

    Posting Permissions

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