SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    Test your CSS skills - Number 5 (hardest yet!)

    Hi,

    Test your CSS skills - Number 5

    Due to demand I have come up with what I think is the hardest test yet and I'll be surprised if anyone can come up with a solution (now there's a challenge for all you experts ).
    Take a look at the link below which shows a simple table layout.

    http://www.pmob.co.uk/temp/fourcellstable.htm

    There are 4 cells that take up the 100% width and each cell will expand in height and equalise with the cell that contains the most content. The background colour will expand to be consistent with the longest cell. I have put the longest text in each different cell so that you can see the full effect.

    While this is a simple job to do in tables it has previously been though almost impossible to replicate with css alone. However after a bit of thought (and 2 hours hard work) I've produced the table layout precisely with all its characteristics. Don't get excited too much though as the layout is probably too convoluted to use in the real world.

    Here are some images to show how the table layout and the css layout compare.

    http://www.pmob.co.uk/temp/fourcellsimages.htm

    As you can see there is no drop of the cells at small sizes and all cells are equalised with the longest cell accordingly.
    • Rules:
      Four cells of 25% each (approx - I'm not worried about a couple of pixels here and there)
    • The layout must not break unless the layout is very small.
    • The same css is to be used for every row. You can't hard code each longest cell by any means. (You should be able to put any amount of text in any cell without altering the css or html to take account of it.)
    • No frames or iframes
    • No javascript or scripting of any kind
    • NO TABLES
    • No inline styles
    • No images
    • No expression,conditional comments, behaviours etc.
    • Use Valid CSS
    • Use Valid xhtml
    • Must work in Firefox and ie6 exactly the same as my example above. You won't be able to use display:table-cell etc as IE6 doesn't understand that.
    • No hacks, no child selectors, no universal selectors, no means of offering separate code to each browser. The same code must work for both browsers.
    There are no prizes other than the self-satisfaction of being the first to complete this. If you solve it then post a message here but PM me the solution so that other people can still have a go.

    As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time. (The methods used in this example will suffer from divitis i'm afraid and won't make much sense if css is turned off but that's not the point of this exercise anyway.)

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: http://www.sitepoint.com/forums/showthread.php?t=168555
    test 2: http://www.sitepoint.com/forums/showthread.php?t=169710
    test 3: http://www.sitepoint.com/forums/showthread.php?t=170190
    test 4: http://www.sitepoint.com/forums/showthread.php?t=171221
    Last edited by Paul O'B; Jun 1, 2004 at 05:03.

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If only display: table; would work in IE
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Romania
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Almost got it. Just that it looks bad when I resize the window.
    An error is a human mistake with honest intention.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by new guy
    If only display: table; would work in IE
    Now that would be too easy lol

    Quote Originally Posted by mofo
    Almost got it. Just that it looks bad when I resize the window
    Keep trying - If you want you can PM me with what you've got and I'll tell you if you're on the right track or not (without giving any clues away ).

    Anyone else got any ideas?

    I told you it wasn't easy lol

    Paul

  5. #5
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm a little confused as to why you would want to turn this into CSS only. - this is not a dig at the competition, just a general enquiry.

    From what I've heard, (i could be wrong), you shouldn't be using tables to control layout, only display tabular data. but this is generally not a layout thing, it is, in my oppinion a table of data.

    I think people in general (me included), try to remove tables entirely from a site, even in cases like this.

    Why would it be beneficial to remove the table in favour of css in this situation. when a simple table set of html tags with no layout attributes and a simple class/id attribute for the table..then css to control the visuals would be perfectly ok.

    :-) Dan

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Daniel,

    Quote Originally Posted by daniel
    I'm a little confused as to why you would want to turn this into CSS only. - this is not a dig at the competition, just a general enquiry.
    If you read the first post you will see that i mention a number of times that these are exercises in using css and nothing to do with semantics or layout.

    Quote Originally Posted by me
    As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time. (The methods used in this example will suffer from divitis i'm afraid and won't make much sense if css is turned off but that's not the point of this exercise anyway.)
    These tests are purely to test the knowledge and skills of using css and are not meant to be valid reasons for using css for the tasks specified.

    However what you will gain from trying to do the impossible is that you will learn many techniques that can be applied in different situations.

    A table is best used for tabular data and of course there would be no point in using css for this as a a table has got it covered.

    But if I changed the test to be make a table with a table it wouldn't be much of a test now would it

    These tests are all about thinking how css works and how it can be applied. This test is specifically difficult and that was the only reason I chose the table test.

    This is not a "how to" or "should do" but is it "possible to do".

    Hope that makes it clearer

    Paul

  7. #7
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup a lot clearer. Thanks :-)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Dougbtx (Doug Livingstone) is in the lead so far with the closest solution, but it's not close enough to win yet unless any of you can beat him to it .

    I'll give you one clue in that the solution requires a lot of nesting (unfortunately - otherwise it would be a valid alternative to a table). Of course there may be other ways to do this apart from my method (but I don't think so).

    You need to think how you can expand the other cells when one cell expands. How can it affect the other cells?

    That's all the clues for now but if no-one's getting near or on the right track then I may start dropping hints during the week.

    Remember that any cell should be able to contain the most (or any amount of) text without changing the css or html to reflect the change.

    Thanks to those who have already PM'd me and keep trying

    Paul

  9. #9
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a solution, and PM'd Paul about it. We'll see if he accepts it.

    It's not pretty, but IMHO it can do what Paul described.

  10. #10
    SitePoint Zealot Hulkur's Avatar
    Join Date
    Oct 2001
    Location
    Estonia
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Done in 15mins.
    Works only in Opera (i love the browser)
    now i just have to hack IE and Moz

    code is valid, browsers are not - when will it end ?
    (2B) or (not 2B) = FF

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Arkkimaagi:

    I'm going to be a bit picky here before I declare a clear winner as I was looking for the content in any cell to be increased without having to change any other css, html or content in other cells to match.

    At the moment you are in second place behind Doug and funnily enough both of you have used more or less the same solution.

    To anyone else who is still trying this you must ensure that any cell can have more content without having to change the CSS, the html or any other content in any other cells.

    I want to be able to go to a cell and type a line of text in and have it render correctly straight away as though it was dynamically entered.

    Quote Originally Posted by Hulkur
    Done in 15mins.
    Works only in Opera (i love the browser)
    Display:table-cell is not allowed (if that's what you were using ) as that would be too easy
    Quote Originally Posted by Hulkur
    now i just have to hack IE and Moz
    No hacks allowed I'm afraid The same code must apply to both browsers Ie6 and Moz. (You can PM me your solution if you want to know if you're on the right track or not.)

    I'll keep this open for a few more days to see what you can all come up with. (Some of you are very inventive).

    Thanks for all the entries so far

    Paul

  12. #12
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, lets see now if I got it nailed.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Arkkimagi
    Ok, lets see now if I got it nailed.
    You certainly have - You are the Winner

    Well done - your solution does exactly what I wanted

    Any cell can be the longest just by typing in more content without changing anything else. The columns all automatically expand to accomodate as per the table example.

    Congratulations, I didn't think anyone was going to get this. I won't post the solution just yet in case some others are in the middle of trying this. I'll post the solution and links tomorrow (or Friday).

    If anyone else is still trying this I'd still like to see your solution in case there's another way to do this. Arkkimagi's solution was similar to mine and both solutions look a little ugly lol.

    Paul

  14. #14
    SitePoint Zealot Hulkur's Avatar
    Join Date
    Oct 2001
    Location
    Estonia
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Display:table-cell is not allowed (if that's what you were using ) as that would be too easy
    This was done in 5mins And yes, it would be too easy (and it works only in opera, don't remember about firefox)

    Quote Originally Posted by Paul O'B
    No hacks allowed I'm afraid The same code must apply to both browsers Ie6 and Moz. (You can PM me your solution if you want to know if you're on the right track or not.)
    No hacks as generally known.
    Just things like border around div so that firefox would show background correctly etc.

    I got it working on opera and IE, firefox is still avoiding me.
    I'll send it in to get comments at least.
    (2B) or (not 2B) = FF

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hulkur
    I'll send it in to get comments at least.
    Great - I'll look forward to it

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just had another great entry from Hulkur which works perfectly in Opera 7 however ie6 and firefox aren't exactly playing ball yet but I'm sure he can fix it

    Good work and thanks for making the effort

    Paul

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Solution Time :

    I haven't had any more enquiries on this so I think its time the solutions were posted.

    Without further ado here is the link to my original solution. The css layout is on top and a table layout below and as you can see they behave very well together.

    http://www.pmob.co.uk/temp/fourcellsboth.htm

    Please no remarks about too many nestings or "You should have used a table" etc - that wan't the point

    In case you are wondering how it works - it goes like this. (Take a deep breath):

    The key element is a float that contains 3 other inner floats that are the same size as the parent. These will be the 4 cells in our layout.

    Each inner float is slid out of the parent by using a 100% negative margin. This creates a telescopic effect where all floats slide out of their parents and eventually fill the 100% width.

    If any one of the floats contains more content it will then stretch its parent which will also stretch its own parent and so on. This is the key to the layout and ties all the expansion down to the first parent float.

    Around that first parent float we then add three outer floats that contain only background colour at the specified intervals that match exactly the inner floats that we detailed earlier.

    When content in any cell is increased the main floats height is increased which also then pushes the three outer elements that contain the colours. In this way we will always get full column colours in the required place.

    As mentioned numerous times this method suffers from numerous nestings and a table is the preferred way of doing this.

    However the technique is quite useful and you could turn it into a 3 column fully fluid layout that doesn't need background gifs and can have different coloured columns.

    Here are some simple examples.

    http://www.pmob.co.uk/temp/new3colfluid/3col.htm
    http://www.pmob.co.uk/temp/new3colfluid/3col_3.htm
    http://www.pmob.co.uk/temp/new3colfluid/3colfluid_1.htm

    These are just experiments and I don't offer them as a means to an end but perhaps something to look into and understand. The level of nesting isn't too bad for a 3 column layout and the best thing for the simpler versions of equal columns is that no hacks are required.

    The winner in this weeks quiz was Arkkimaagi and here is his code which has some similarities to mine:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title>CSS quiz 5 - Arkkimaagi</title>
    <style type="text/css">
    <!--
    .bl{
    background-color: #0000FF;
    } 
    .re{
    background-color: #FF0000;
    }	
    .si{
    background-color: #C0C0C0;
    }
    .gr{
    background-color: #008000;
    }
     
    .re{
    width: 25%;
    }
    .gr,.bl,.si{
    margin-left: 100%;
    margin-right: -100%;
    position: relative;
    width: 100%;
    }
     
    .clear{
    clear: both;
    line-height: 1px;
    }
     
     
     
    .inner{
    margin-left: -300%;
    position: relative;
    width: 400%;
    }
     
    .inner1{
    float: left;
    position: relative;
    width: 25%;
    }
     
    .inner2{
    float: left;
    position: relative;
    width: 25%;
    }
     
    .inner3{
    float: left;
    position: relative;
    width: 25%;
    }
     
    .inner4{
    float: left;
    position: relative;
    width: 25%;
    }
    -->
    </style>
    </head>
    <body>
    <div class="row"> 
    <div class="re"> 
    	<div class="gr"> 
    	 <div class="bl"> 
    		<div class="si"> 
    		 <div class="inner"> 
    			<div class="inner1">content 1<br />
    			 <br />
    			 <br />
    			 long</div>
    			<div class="inner2">content 2</div>
    			<div class="inner3">content 3</div>
    			<div class="inner4">content 4</div>
    			<br class="clear">
    		 </div>
    		</div>
    	 </div>
    	</div>
    </div>
    </div>
    <br>
    <div class="row"> 
    <div class="re"> 
    	<div class="gr"> 
    	 <div class="bl"> 
    		<div class="si"> 
    		 <div class="inner"> 
    			<div class="inner1">content 1</div>
    			<div class="inner2">content 2<br />
    			 <br />
    			 <br />
    			 long</div>
    			<div class="inner3">content 3</div>
    			<div class="inner4">content 4</div>
    			<br class="clear">
    		 </div>
    		</div>
    	 </div>
    	</div>
    </div>
    </div>
    <br>
    <div class="row"> 
    <div class="re"> 
    	<div class="gr"> 
    	 <div class="bl"> 
    		<div class="si"> 
    		 <div class="inner"> 
    			<div class="inner1">content 1</div>
    			<div class="inner2">content 2</div>
    			<div class="inner3">content 3<br />
    			 <br />
    			 <br />
    			 long</div>
    			<div class="inner4">content 4</div>
    			<br class="clear">
    		 </div>
    		</div>
    	 </div>
    	</div>
    </div>
    </div>
    <br>
    <div class="row"> 
    <div class="re"> 
    	<div class="gr"> 
    	 <div class="bl"> 
    		<div class="si"> 
    		 <div class="inner"> 
    			<div class="inner1">content 1</div>
    			<div class="inner2">content 2</div>
    			<div class="inner3">content 3</div>
    			<div class="inner4">content 4<br />
    			 <br />
    			 <br />
    			 long</div>
    			<br class="clear">
    		 </div>
    		</div>
    	 </div>
    	</div>
    </div>
    <span class="clear"></span>&nbsp; </div>
    </body>
    </html>
    In second place we have Hulkur with his version that only works in Opera7 at the moment but I'm sure he could fix it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>CSS Test 5 - Hulkur</title>
    <style type="text/css">
    .row { width: 99%; clear: both; border-bottom: 2px solid #fff; border-top: 2px solid #fff; }
    .c_1,.c_2,.c_3,.c_4 { float: left; }
    .box1 { background-color: #f69; width: 100%; margin: 0 0 0 0; } 
    .box2 { background-color: yellow; width: 75%; margin: 0 -5px 0 25%; } 
    .box3 { background-color: red; width: 66%; margin: 0 -5px 0 34%; } 
    .box4 { background-color: blue; width: 50%; margin: 0 -6px 0 50%; } 
    .c_1 { width: 25%; }
    .c_2 { width: 34%; }
    .c_3 { width: 50%; }
    .c_4 { width: 99%; }
    .clear { clear: both; }
    /* "hacks" follow */
    /* firefox: background color fix */ 
    .box1 { border: 1px solid #f69; margin-top: -1px; margin-bottom: -1px; }
    .box2 { border: 1px solid yellow; margin-top: -1px; margin-bottom: -1px; }
    .box3 { border: 1px solid red; margin-top: -1px; margin-bottom: -1px; }
    .box4 { border: 1px solid blue; margin-top: -1px; margin-bottom: -1px; }
    /* IE: height fix */
    .box4 .clear { width: 99%; }
    </style>
    <meta http-equiv="Content-Type" content='text/html; charset="ISO-8859-15"' >
    </head>
    <body>
    <!-- Row 1 -->
    <div class="row"> 
    <div class="box1"> 
    	<div class="c_1">Cell 1 <br />
    	 Cell</div>
    	<div class="box2"> 
    	 <div class="c_2">Cell 2</div>
    	 <div class="box3"> 
    		<div class="c_3">Cell 3</div>
    		<div class="box4"> Cell 4 
    		 <div class="clear"></div>
    		</div>
    		<div class="clear"></div>
    	 </div>
    	 <div class="clear"></div>
    	</div>
    	<div class="clear"></div>
    </div>
    </div>
    <!-- Row 2 -->
    <div class="row"> 
    <div class="box1"> 
    	<div class="c_1">Cell 1</div>
    	<div class="box2"> 
    	 <div class="c_2">Cell 2 <br />
    		Cell</div>
    	 <div class="box3"> 
    		<div class="c_3">Cell 3</div>
    		<div class="box4"> Cell 4 
    		 <div class="clear"></div>
    		</div>
    		<div class="clear"></div>
    	 </div>
    	 <div class="clear"></div>
    	</div>
    	<div class="clear"></div>
    </div>
    </div>
    <!-- Row 3 -->
    <div class="row"> 
    <div class="box1"> 
    	<div class="c_1">Cell 1</div>
    	<div class="box2"> 
    	 <div class="c_2">Cell 2</div>
    	 <div class="box3"> 
    		<div class="c_3">Cell 3 <br />
    		 Cell</div>
    		<div class="box4"> Cell 4 
    		 <div class="clear"></div>
    		</div>
    		<div class="clear"></div>
    	 </div>
    	 <div class="clear"></div>
    	</div>
    	<div class="clear"></div>
    </div>
    </div>
    <!-- Row 4 -->
    <div class="row"> 
    <div class="box1"> 
    	<div class="c_1">Cell 1</div>
    	<div class="box2"> 
    	 <div class="c_2">Cell 2</div>
    	 <div class="box3"> 
    		<div class="c_3">Cell 3</div>
    		<div class="box4"> Cell 4 <br />
    		 Cell 
    		 <div class="clear"></div>
    		</div>
    		<div class="clear"></div>
    	 </div>
    	 <div class="clear"></div>
    	</div>
    	<div class="clear"></div>
    </div>
    </div>
    </body>
    </html>
    Also worth a mention was dougbtx who provided the first entry for this and his method took a sideways look at the problem and basically shifted content into each cell to math the longest cell. However this meant that you couldn't just add data to one cell only or the layout would break.

    However it was very clever and worth a mention

    I hope you've enjoyed this weeks quiz and keep an eyeout for the next one some time next week. Next weeks will be a bit simpler so more people can have a go.

    Thanks to all those that entered and congratulaions to those mentioned above especially to arkkimaagi's solution which worked more or less as stated (not quite as stable as mine though )

    Paul

  18. #18
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Boo! negative percentages Good job though, tough one.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  19. #19
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Now make thread number six so I can participate

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by newguy
    Boo! negative percentages Good job though, tough one.
    Cheers

    Quote Originally Posted by kilroy
    Now make thread number six so I can participate
    You'll have to wait until Monday I'm afraid

    Paul

  21. #21
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thanks Paul, looking forward to it!

  22. #22
    SitePoint Zealot Octal's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't do this one, in fact I am still trying to figure out the how-it-works bit, however I finally understand 'divitis'
    Octal - All your base-8 belong to us
    "Knowing is not enough, we must apply.
    Willing is not enough, we must do." - Bruce Lee

  23. #23
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Talking

    (I have been going through the challenges)

    This seems to work well in all the browsers I have tested it in (including IE6!)....
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>ro0bear</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html, body {margin: 0; padding: 0;}
    .pink {background-color: pink;  padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 0; z-index: 0;}
    .yellow {background-color: yellow;  padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 24.9%; z-index: 0;}
    .red {background-color: red; padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 49.8%; z-index: 0;}
    .blue {background-color: blue;  padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 74.7%; z-index: 0;}
    .container p {width: 24.9%; float: left; margin: 0; z-index: 1; padding: 0;}
    .container {position: relative; margin: 0; padding: 0; width: 100%; border: 1px solid white; overflow: hidden; z-index: 1;}
    .bottom {position: relative; padding-bottom: 1000%; background-color: white; width: 100%; z-index: 1;}
    #outercontainer {position: absolute; width: 100%; margin: 0.5em; padding: 0;}
    </style>
    </head>
    <body>
    
    
    
    <div id="outercontainer">
    
    <div class="pink"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="blue"></div>
    
    <div class="container">
    <p>This is cell 1 with the most text: This is cell 1 with the most text</p>
    <p>This is cell 2 : This is cell 2 :</p>
    <p>This is cell 3 : This is cell 3 :</p>
    <p>This is cell 4 : This is cell 4 :</p>
    </div>
    
    <div class="container">
    <p>This is cell 1 : This is cell 1 :</p>
    <p>This is cell 2 with the most text: This is cell 2 with the most text</p>
    <p>This is cell 3 : This is cell 3 :</p>
    <p>This is cell 4 : This is cell 4 :</p>
    </div>
    
    <div class="container">
    <p>This is cell 1 : This is cell 1 :</p>
    <p>This is cell 2 : This is cell 2 :</p>
    <p>This is cell 3 with the most text: This is cell 3 with the most text</p>
    <p>This is cell 4 : This is cell 4 :</p>
    </div>
    
    <div class="container">
    <p>This is cell 1 : This is cell 1 :</p>
    <p>This is cell 2 : This is cell 2 :</p>
    <p>This is cell 3 : This is cell 3 :</p>
    <p>This is cell 4 with the most text: This is cell 4 with the most text</p>
    </div>
    <div class="bottom"></div>
    </div>
    
    
    
    </body>
    </html>
    *waits to hear where it goes wrong...*

    ro0bear

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Good thinking ro0bear using absolute columns to make the colours

    That seems to work well and is neater than the original. Glad you are still having fun with these.


Bookmarks

Posting Permissions

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