SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    basic layout and margins etc.

    I have this very basic layout:

    http://page-test.co.uk/box.html

    How is the best way to do it so everything is aligned correctly? I want boxes to match up on both the left and right edges and with a % margin between them. I also want this to happen at anything as low as 300px wide and up to 190px wide. If you adjust the width of my example it's all over the place.

    I'm guessing this is simple, but I can't get the hang of it.

    Thanks

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Do you insist on a percent margin between the boxes or would a fixed margin be satisfactory?
    Code:
    <!DOCTYPE html>
    <html>
    <!--
    
    -->
    <head>
        <title>old school</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .row {
        display:table;
        width:100%;
        border-spacing:8px 4px;
    }
    .row div {
        display:table-cell;
        width:20%;
        height:30px;
        border:1px solid #080;
        background-color:#cfc;
        text-align:center;
    }
    
        </style>
    </head>
    <body>
    
    <div class="row">
        <div>text</div>
    </div>
    <div class="row">
        <div>text</div>
        <div>text</div>
    </div>
    <div class="row">
        <div>text</div>
        <div>text</div>
        <div>text</div>
    </div>
    <div class="row">
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi. Thanks.

    I'm fine with the fixed margin. Just wondering, you put the title of the page as 'old school', is this because it's old coding standards?

    I seem to be getting different ideas for this problem from different people.

    The fact I notice the use of display:table-cell, is that modern standards as I know the use of the HTML <table> tag isn't modern standards. Is this the same thing?

    Thanks again for the help.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    ronpat's solution seems a good one to me. Getting the elements to align nicely would be harder with other methods—but almost impossible (I'd say) with % margins, as browsers end up calculating things in pixels, which may not always add up exactly—especially since you are mixing % and px with those red borders.

    Quote Originally Posted by johnsmith153 View Post
    The fact I notice the use of display:table-cell, is that modern standards as I know the use of the HTML <table> tag isn't modern standards. Is this the same thing?
    display: table etc. has been in CSS for a long time, but it has been under used because it wasn't supported by InternetExplorer until version 8. So although it's not modern, it's usage is fairly modern, so to speak. It's fine to use in small doses, and nothing to do with HTML tables. CSS is for presentation, and this is a presentational use of CSS, so it's fine. Using it for whole page layouts, however, kind of does get you back to the same problem as with HTML tables, as layouts become rather inflexible in terms of reorganizing content.

  5. #5
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph.

    Thanks for looking at this.

    I want to create an entire layout using this, along with media queries so the layout can be set differently on different mobile devices. I'm not keen on the current grid layouts out there.

    Is there a better solution?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    I want to create an entire layout using this, along with media queries so the layout can be set differently on different mobile devices. I'm not keen on the current grid layouts out there.
    We probably need more info on how you want to lay out your page, but personally, I prefer to use floats that become full width on smaller devices via @media.

  7. #7
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    We probably need more info on how you want to lay out your page, but personally, I prefer to use floats that become full width on smaller devices via @media.
    The problem is I don't want this problem:

    http://www.sitepoint.com/forums/show...t=#post5193774

    ...which is why I believe I need to avoid floats.

    But using vertical align has problems with the widths hence this topic.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    We probably need more info on how you want to lay out your page, but personally, I prefer to use floats that become full width on smaller devices via @media.
    And I want to be able to everything this can:

    http://page-test.co.uk/g.html

    (from http://cssgrid.net)

    ..but that script has these problems:

    (1) I can't always know exactly the number of columns in a row. I don't want to have to wrap 'container' and 'row' around everything. If I do this:

    http://page-test.co.uk/g2.html

    ...then it messes up badly.

    (2) I want more control over columns rather than every column dropping to full width on mobiles. I want to be able to do this:

    <div class="quarter-width mobile-size-half-width>
    XXX
    </div>
    <div class="quarter-width mobile-size-half-width>
    XXX
    </div>
    <div class="quarter-width mobile-size-half-width>
    XXX
    </div>
    <div class="quarter-width mobile-size-half-width>
    XXX
    </div>

    ...so it displays four boxes on full screens and drops to two wide etc. I want to be able to specify different sizes (and in fact have three different sizes (i) >1000px (ii) 480-1000 (iii) <480 etc.

    (3) I don't want to have to add 'last' to every last div in a row.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    The problem is I don't want this problem
    That's where the display: inline-block comes in really handy. But I also feel that layouts with too much of this problem are probably not constructed that well. No matter how we lay out content—in boxes all over the place or whatever—it is essentially linear ... as you see when viewing the raw HTML. I prefer not to have too many things in boxes that sit side by side and float all over the place, as it just seems like bad design to me. I don't like to have to look this way and that on a page to find content. It seems to me that graphic designers forget this in their zeal to make pages interesting. I hate newspapers for this reason. I prefer to start from the top of a page and read down. I'm not convinced that people take much notice of boxes of content all over a web page. It makes us feel cool as designers, but what's the real point?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    I want to be able to specify different sizes (and in fact have three different sizes (i) >1000px (ii) 480-1000 (iii) <480 etc.
    That's exactly what @media rules do. You can give elements different layout at a range of screen widths.

  11. #11
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph,

    So I have two choices:

    (1) display:inline-block but then I'm back to the problem at the very start of this topic.

    (2) Use Ronpat's example, but I'm aware of your advice:

    It's fine to use in small doses... Using it for whole page layouts, however, kind of does get you back to the same problem as with HTML tables, as layouts become rather inflexible in terms of reorganizing content.
    I'm stuck really.

    I'm also still looking at the possibility of setting different widths on the display:table one (as opposed to all columns being the same width) - so that may not even be possible.

    Thanks again.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    display:inline-block but then I'm back to the problem at the very start of this topic.
    I'm still not clear on what that problem is, though ...

    I'd like to see a practical example of a layout you are looking at (like a set of screen shots of the whole page) to be able to suggest how I'd go about it.

  13. #13
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I'm still not clear on what that problem is, though ...

    I'd like to see a practical example of a layout you are looking at (like a set of screen shots of the whole page) to be able to suggest how I'd go about it.
    http://page-test.co.uk/box.html

    I want boxes to match up on both the left and right edges and with a % margin between them. I also want this to happen at anything as low as 300px wide and up to 190px wide. If you adjust the width of my example it's all over the place.

    That's when Ronpat suggested the table idea, but you then said it wouldn't be a good idea for general use. I'm also not sure if I can set varied widths on the table layout (e.g. like 3 columns of different widths).

    I only really need to be able to do the box.html page nicely aligned, just like http://page-test.co.uk/table.html is (Ronpat's example is nicely aligned) but need to be sure of not having problems with the table example, and need to have as much flexibility as both any of the grid layouts out there (most use float) and also as much flexibility as http://page-test.co.uk/box.html gives (but with the aligned edges).

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yeah, but as I said, using % margins is a real problem, especially when combined with px borders. Lose one or the other.

    If I implied that there's anything wrong with using display: table, then ignore the comment, as it's fine to use. If you care about IE7 and under (which I don't) you'll have to find a fallback for them, that's all.

    My problem with the box.html is that it's not a real layout. No page is likely to look like that, which is why I'd rather see a real page layout to comment further.

  15. #15
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yeah, but as I said, using % margins is a real problem, especially when combined with px borders. Lose one or the other.

    If I implied that there's anything wrong with using display: table, then ignore the comment, as it's fine to use. If you care about IE7 and under (which I don't) you'll have to find a fallback for them, that's all.

    My problem with the box.html is that it's not a real layout. No page is likely to look like that, which is why I'd rather see a real page layout to comment further.
    Ok, thanks Ralph, I understand.

    I'll play around with all of them and decide.

    The only thing I'm thinking, and struggling with, is in Ronpat's example, how to set different widths for the columns. I haven't a clue why when he sets 20% width that all columns are even in width regardless if there is 1, 2 or 4 columns.

    Strangely 5 columns or more doesn't work unless I change the width to something less. In fact if I set width to 1%, it works better for all column widths (I think).

    There must be a way to set a class on each div, e.g. 'full', 'half', 'quarter' etc. or something, but I can't see how.

    Also, if I do this:
    Code:
    @media screen and (max-width:480px) {
    .mobile-size-half-width {
      //convert to 2 columns wide
    }
    }
    <div class="row">
    <div class="quarter-width mobile-size-half-width>
    XXX
    </div> 
    <div class="quarter-width mobile-size-half-width>
    XXX
    </div>
    <div class="quarter-width mobile-size-half-width>
    XXX
    </div>
    <div class="quarter-width mobile-size-half-width>
    XXX
    </div>
    </div>
    ...I don't think it would work as I think each actual row needs <div class="row"> wrapping around it, which isn't ideal.

    Thanks again for taking the time.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I don't know the ins and outs of CSS tables (too lazy to read the specs!) but obviously adding a width of some sort forces the cells to display equally, despite the amount of content in each. Even 20% width on five cells works fine for me in Chrome.

    As you say, CSS table layouts aren't as flexible as they could be, partly because of the need for a row wrapper.

    In your HTML example, it's better not to have classes that represent a layout style, like "quarter-width". If you later decide that thoe divs should display "half width", etc, then those class names will look pretty silly. Name them according to their role, such as "boxes" or whatever. On a screen width of 480px or less, you then just set a width for boxes with that class. You wouldn't want the class to be called "quarter-width" if you are going to set the element to full width, or half width, or whatever, on mobile devices.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Ditto everything that Ralph posted, especially a working example of your concept with behavioral preferences and/or absolutes! The overall context is important.

    I chose to title the demo "old school" precisely to stimulate discussion <smile>.

    I chose 20% because of your example and for convenience.
    The rule is that the percentage width of all table-cells in a row cannot exceed 100%. Less than 100% is fine. The percent value does matter, but can be considered a nuance for the time being.
    You can assign different percentage widths to the cells to change their relative widths (ratio) within the row. (see new demo)

    Tables are blocks that shrink-wrap by default (full blocks, not inline and not floating).
    Table-cells are containers that shrink to fit their content OR [uniformly] expand to fit the table container, if it has been given a width, by default.
    Together, these two properties possess unique behaviors.

    Actual table construction requires a selector with the table-row property, not just selectors with table and table-cell properties, and all cells in the same column have the same width (thus, the "table"); however, the table-row property is not necessary in most single row applications of these styles.

    I see from the discussion that you are looking for a page layout mechanism. I don't think you would be happy with table properties as a page layout scheme in the long run.

    To answer your question about widths, the following example applies different widths to the table-cells within 100% width rows.
    Code:
    <!DOCTYPE html>
    <html>
    <!--
    About cell widths:
    The percentage widths of table-cells cannot exceed 100% in a row.
    eg: in the first row, any width value represents 100% of the available width.
        in the second row, 20% & 30% will set the width of the first cell to 40/100 of the full width and the width of the second cell to 60/100 of the full width of the row.
        in the third row, 20:30:10 represents widths of 2/6 + 3/6 + 1/6 of 100%.
        in the fourth row, 20:30:10:40 assigns widths of 2/10 + 3/10 + 1/10 + 4/10 of the table to the respective cells.
    In practice, I would not likely assign the same width to all cells (as I did in the previous demo).
        Instead, I would use classes (cell1,cell2,cell3) or adjacent sib selectors because the different cells are likey to contain other unique styles.
        Please don't confuse the simplicity of the demo with required styles.
    -->
    <head>
        <title>css table/table-cells</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    html,body {
        width:100%;
    }
    .row {
        display:table;
        width:100%;
        border-spacing:12px 6px;
        margin:0px auto;
    }
    .row div {
        display:table-cell;
        width:20%;
        height:30px;
        border:1px solid #080;
        background-color:#cfc;
    }
    .row div + div {width:30%}
    .row div + div + div {width:10%}
    .row div + div + div + div {width:40%}
        </style>
    </head>
    <body>
    
    <div class="row">
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    
    </body>
    </html>

  18. #18
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Am kinda lost as to what you want specifically so I will attempt to provide a standardized answer which is, hopefully, on target.
    Oh an there is NOTHING wrong with floats. I love display:inline, but sometimes you end up with a whitespace bug, which then takes display table to correct which then means you have to hack for IE and/or aren't able to use RP/AP . In short there is no panacea in web design.. only clever situational thinking... the quicker one accepts that the better off one is.

    anyway, columns and margins.

    Simply put, discounting IE6, which I keep alive only for the benefit of my parents. you could use adjacent selectors and a little math. Say it with me : "Math... love it .. live it!"

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title</title>
    
    <style type="text/css">
    .box{border:1px solid red}
    .full { }
    .half, .quarter {float:left; margin-right:-2px;}
    .half {width:49%; }
    .quarter {width:23.5%;   }
    .half + div, .quarter + div { margin-left:2%}
    .row +div{margin-left:0; clear:left} 
    </style>
    
    </head>
    
    <body>
    
    <div class="box full row">11111111111</div>
    <div class="box half ">22222222222</div>
    <div class="box half row">33333333333</div>
    <div class="box quarter ">44444444444</div>
    <div class="box quarter">55555555555</div>
    <div class="box quarter">66666666666</div>
    <div class="box quarter row">77777777777</div>
    <div class="box half ">Mix</div>
    <div class="box quarter ">and</div>
    <div class="box quarter">Match</div>
    </body>
    
    </html>
    This is of course calibrated to percentages, and am compensating for your container borders. But ,as you can see, it works. I point out that at some point you get a pixel jog... that percentages for you (1-2px rounding errors that will happen because browsers round up round down or truncate)

  19. #19
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great. Thanks a lot everyone. I'll try out all examples and decide on the best solution.

  20. #20
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    This is of course calibrated to percentages, and am compensating for your container borders. But ,as you can see, it works. I point out that at some point you get a pixel jog... that percentages for you (1-2px rounding errors that will happen because browsers round up round down or truncate)
    Thanks, this is great.

    A few problems though if you or anyone can help with:

    (1) I need to create these other box sizes:
    - three quarters
    - one third
    - two thirds
    - one eighth
    - one sixth
    - seven eighths

    I can do this myself but don't understand the calculation you've used. I see that the half-sized-box would use 49% width and 23.5% width. I also need to be able to mix all sorts in a row without manually (if possible) adjusting margins.

    (2) IE7 is a bit of a mess. If I have the browser fully open then it's dreadful. If the browser is about 1000px then it still isn't right. My average CSS knowledge tells me that the code you posted includes an IE fix though.

    (3) IE6 is actually better than IE7 but margins are ignored so there's no gap between boxes.

    Thanks again. I believe this is the best method by far.

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    for d_p (et.al.) with appreciation for a very clever scheme.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?888542-basic-layout-and-margins-etc&p=5196011#post5196011
    Thread: basic layout and margins etc.
    2012.09.28 02:28
     johnsmith153
    
    Code by: dresden_phoenix
    Quote: "In short, there is no panacea in web design... only clever situational thinking... the quicker one accepts that the better off one is."
    
    n = number of segments in a row.
    s = % width of one segment in a row.
    m = number of segments in a multi-segment column.
    w = % width of a multi-segment column
    
    100 - 2(n-1)   
    ------------ = % width of one segment = s
         n
    
     s  + ( m - 1 )( s + 2 ) = % width of a multi-segment column = w
    
    All fractions are accounted for between 1 and 1/10.
    
    -->
    <head>
        <title>dresden_phoenix 3</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    body {
        margin:20px 22px 20px 20px;
    }
    .outer {
        display:table;
        width:100%;
    }
    .box {
        border:1px solid red;
        background-color:#fdd;
        text-align:center;
        padding:4px 0;
        margin-top:8px;
    }
    .full {width:100.0000%;}
    .half {width:49.0000%;}
    .onethird {width:32.0000%;}
    .twothirds {width:66.0000%;}
    .onefourth {width:23.5000%;}
    .threefourths {width:74.5000%}
    .onefifth {width:18.4000%;}
    .twofifths {width:38.8000%;}
    .threefifths {width:59.2000%;}
    .fourfifths {width:79.6000%;}
    .onesixth {width:15.0000%;}
    .fivesixths {width:83.0000%;}
    .oneseventh {width:12.57143%;}
    .twosevenths {width:27.14286%;}
    .threesevenths {width:41.71429%;}
    .foursevenths {width:56.28571%;}
    .fivesevenths {width:70.85714%;}
    .sixsevenths {width:85.42857%;}
    .oneeighth {width:10.7500%;}
    .threeeighths {width:36.2500%;}
    .fiveeighths {width:61.7500%;}
    .seveneighths {width:87.2500%;}
    .onenineth {width:9.3333%;}
    .twonineths {width:20.6667%;}
    .fournineths {width:43.3333%;}
    .fivenineths {width:54.6667%;}
    .sevennineths {width:77.3333%;}
    .eightnineths {width:88.6667%;}
    .onetenth {width:8.2000%;}
    .threetenths {width:28.6000%;}
    .seventenths {width:69.4000%;}
    .ninetenths {width:89.8000%;}
    
    .full,
    .half,
    .onethird,
    .twothirds,
    .onefourth,
    .threefourths,
    .onefifth,
    .twofifths,
    .threefifths,
    .fourfifths,
    .onesixth,
    .fivesixths,
    .oneseventh,
    .twosevenths,
    .threesevenths,
    .foursevenths,
    .fivesevenths,
    .sixsevenths,
    .oneeighth,
    .threeeighths,
    .fiveeighths,
    .seveneighths,
    .onenineth,
    .twonineths,
    .fournineths,
    .fivenineths,
    .sevennineths,
    .eightnineths,
    .onetenth,
    .threetenths,
    .seventenths,
    .ninetenths {
        float:left;
        margin-right:-2px;    /* compensates for the 1px border */
    }
    .half + div,
    .onethird + div,
    .twothirds + div,
    .onefourth + div,
    .threefourths + div,
    .onefifth + div,
    .twofifths + div,
    .threefifths + div,
    .fourfifths + div,
    .onesixth + div,
    .fivesixths + div,
    .oneseventh + div,
    .twosevenths + div,
    .threesevenths + div,
    .foursevenths + div,
    .fivesevenths + div,
    .sixsevenths + div,
    .oneeighth + div,
    .threeeighths + div,
    .fiveeighths + div,
    .seveneighths + div,
    .onenineth + div,
    .twonineths + div,
    .fournineths + div,
    .fivenineths + div,
    .sevennineths + div,
    .eightnineths + div,
    .onetenth + div,
    .threetenths + div,
    .seventenths + div,
    .ninetenths + div {
        margin-left:2%;
    }
    .row + div {
        margin-left:0;
        clear:left;
    }
        </style>
    </head>
    <body>
    <div class="outer">
        <div class="box full row">1</div>
        <div class="box half">1/2</div>
        <div class="box half row">1/2</div>
        <div class="box onethird">1/3</div>
        <div class="box twothirds row">2/3</div>
        <div class="box onefourth">1/4</div>
        <div class="box threefourths row">3/4</div>
        <div class="box onefifth">1/5</div>
        <div class="box fourfifths row">4/5</div>
        <div class="box twofifths">2/5</div>
        <div class="box threefifths row">3/5</div>
        <div class="box onesixth">1/6</div>
        <div class="box fivesixths row">5/6</div>
        <div class="box oneseventh">1/7</div>
        <div class="box sixsevenths row">6/7</div>
        <div class="box twosevenths">2/7</div>
        <div class="box fivesevenths row">5/7</div>
        <div class="box threesevenths">3/7</div>
        <div class="box foursevenths row">4/7</div>
        <div class="box oneeighth">1/8</div>
        <div class="box seveneighths row">7/8</div>
        <div class="box threeeighths">3/8</div>
        <div class="box fiveeighths row">5/8</div>
        <div class="box onenineth">1/9</div>
        <div class="box eightnineths row">8/9</div>
        <div class="box twonineths">2/9</div>
        <div class="box sevennineths row">7/9</div>
        <div class="box fournineths">4/9</div>
        <div class="box fivenineths row">5/9</div>
        <div class="box onetenth">1/10</div>
        <div class="box ninetenths row">9/10</div>
        <div class="box threetenths">3/10</div>
        <div class="box seventenths row">7/10</div>
    </div>
    </body>
    </html>
    Last edited by TechnoBear; Oct 6, 2012 at 04:40. Reason: Typo fixed

  22. #22
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    for d_p (et.al.) with appreciation for a very clever scheme.
    Code:
    This is excellent.

    There are a couple of problems though if you're interested:

    (1) IE 7 is fine if using exactly your example, but if you add a bit of content (http://page-test.co.uk/layout.html) then it's a bit of a mess. IE6 is actually acceptable. There's no margin in between the boxes, but I'm guessing no one's going to complain about that with IE6.

    (2) Opera Mobile and Opera Mini aren't perfect, but it's quite minor and it must be the fault of those browsers (Opera Desktop is fine). There's a free Opera Mobile simulator in the Mac App store which renders pretty similar to a real device for anyone wanting to look.

    Thanks to everyone involved in creating this, it looks great to me.

  23. #23
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    John:

    1) Changing <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> to
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> should help IE A LOT!!!


    2) I suspect are the whole code will NOT be pixel perfect. AGAIN browsers differ in how they round values... ( plus adding bored to your elements adds another tier of complexity but I wont go into that now). What I mean is what is 33.33333% of 1000px.. remember you can't have fractional pixels! So be fluid in your graphics/bg.

    Ronpat:
    Am giving you a gold star, for writing out the formulas in comment form!!!

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Ronpat:
    Am giving you a gold star, for writing out the formulas in comment form!!!
    Humbly and proudly accepted, sir!

    It was a fun exercise, d_p. Caught my fancy. Compelled to play with it. Very clever stuff, you post.

    Typo: 10/10 should have been 1/10

  25. #25
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,363
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ronpat View Post
    Typo: 10/10 should have been 1/10
    Fixed.


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
  •