Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorValEff
    • CommentTimeJul 19th 2006
     permalink
    heh, sorry for the drama ^_^

    I just took on a new project, and I've decided to fight tooth n' nail against using ANY tables whatsoever. I've been nursing that bad habit for far, far too long. So anyway, I'm humbled before you guys, admitting my relative n00bness to display:block & float:whatever. Please be gentle.

    I'm aiming to emulate a 2 cell table. Cake, right?

    .box1 {
    display: block;
    float: left;
    }

    .box2 {
    display: block;
    float: left;
    }

    Then, I need another block underneath those 2 (equivalent to a 2nd row, colspan=2). Following the same concept as before, this works just dandy in IE (that's a first), but Mozilla sticks the 3rd block inline with the 2nd. I've been tweaking around with nowraps, positioning, etc., and I've googled various strings for the past hour - but no dice.

    Any help is VERY appreciated. And while I've got your attention, any advice on whether I should be using div's or spans for this?
    • CommentAuthorEgorka
    • CommentTimeJul 19th 2006
     permalink
    Hi,

    As I remember the floated elements must have width specified. That is the first thing.
    Secondly you either have to clear the elements that start on the second "row" or make them so wide that only 2 are fitting to 1 row.

    I hope you undestood my woopsy explanation... :-)

    Egorka
  1.  permalink
    You could try this, it works with firefox and ie7 at least:

    .box1, .box2 {
    display: block;
    float: left;
    border: 1px solid;
    height: 100px;
    margin: 2px;
    }

    .box1 {
    width: 200px;
    }

    .box2 {
    clear:left;
    width: 406px;
    }

    and the html:

    <div class="box1"></div><div class="box1"></div>
    <div class="box2"></div>

    Note that the width of the "box2" is 6px wider than the sum of the two "box ones". Two of those pxs come from the border widths (two left and right borders add up to 4px, whereas the bottom div only has one left and one right hand side border), and the rest comes from the margins.

    Also, I'd like to add that tables are still very much useful in displaying tabular data. It's not absolutely necessary to discard them altogether.
    • CommentAuthorValEff
    • CommentTimeJul 19th 2006 edited
     permalink
    Oops, I forgot to mention that they do have a width specified.

    I'm playing around with clear, but still having the same issue. W3C's site says:

    Note: This property does not always work as expected if it is used along with the "float" property.

    ... uhmm, grumble.

    :)
    • CommentAuthorcalvinc
    • CommentTimeJul 19th 2006
     permalink
    is this what you mean:

    box1 | box2
    --------------
    box3

    you can try this if that is what you mean:

    <div id="wrapper">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    </div>

    #wrapper{
    margin:0 auto;
    padding:0;
    width:200px;
    }

    #box1{
    width:150px;
    background-color:#333333;
    float:left;
    color:#CCCCCC;
    }

    #box2{
    width:50px;
    background-color:#0066CC;
    float:left
    }

    #box3{
    clear:both;
    background-color:#00FF99;
    }
    • CommentAuthorkmg
    • CommentTimeJul 19th 2006
     permalink
    kari.patila is right it is perfectley ok to use tables for tabular data, but if you want to create a table using all css:

    HTML GOES LIKE THIS;

    <div class="table_wrapper">

    <div class="cell">column1row1</div>
    <div class="cell">column2row1</div>
    <div class="cell">column3row1</div>
    <div class="cell">column1row2</div>
    <div class="cell">column2row2</div>
    <div class="cell">column3row2</div>

    </div>

    CSS GOES LIKE THIS;

    .table_wrapper{
    width:600px;
    }


    .cell{
    float:left;
    width:200px;
    height:50px;
    background-color:#009966;
    }

    usinf the class so you can use table and cells over and over.
    • CommentAuthorValEff
    • CommentTimeJul 19th 2006 edited
     permalink
    My husband and I were having that very discussion last night, regarding my decision to extinguish tables altogether. He was basically saying the same thing; that tables are a useful tool ... and by throwing out that tool, I'm just limiting my options.

    All things considered (and after much pouting), I've decided it's best to use a table again. This is a client's ecommerce site, not an appropriate place to experiment IMHO. I did, however, try the methods listed above (THANK YOU!). You guys rock, this is definitely *the* place to be.
    • CommentAuthorhawke
    • CommentTimeJul 19th 2006 edited
     permalink
    It is easily done.
    Let's say you have ...

    < div 1>< /div>< div 2>< /div>
    < div 3>< /div>

    You just have to put DIV 1 and DIV 2 float: left;, then create a <br> "clear element"

    br.clear {
    clear: both;
    }

    then after your div 1 and div 2 put this br class...

    < div 1>< /div>< div 2>< /div>
    < br class="clear" />
    < div 3>< /div>

    And it work, you have your div3 under your 2 side-to-side div :)! Hope it help :)
    • CommentAuthordcrean
    • CommentTimeJul 19th 2006
     permalink
    "He was basically saying the same thing; that tables are a useful tool ... and by throwing out that tool, I'm just limiting my options."

    There really is nothing wrong with tables. Tables are a useful tool, for presenting tabular data. If you are including a data grid, by all means a table is the right tool. The point of xhtml/css is not to depreciate the table tag, because it is a perfectly valid tool for any developer to use. The true intent of all the development done in pure css layouts is to remove the reliance on complex use of tables for layout. Table is not the right tool for that, and should never be used in that way.
    • CommentAuthorPettyRider
    • CommentTimeJul 19th 2006
     permalink
    Here's my go (minorly tested)

    XHTML:


    <div class="c_1 c_header">Name:</div>
    <div class="c_2 c_header">Age:</div>

    <div class="c_1">Colin</div>
    <div class="c_2">20</div>

    <div class="c_1">Stephanie</div>
    <div class="c_2">22</div>


    CSS:


    div.c_1 {
    float: left;
    width: 100px; /* Anything but 'auto' */
    padding: 0.3em 0.8em;
    clear: left;
    }

    div.c_2 {
    float: left;
    width: 50px; /* Anything but 'auto' */
    padding: 0.3em 0.8em;
    }

    div.c_header {
    padding: 0.3em 0.8em;
    font-weight: 600;
    border-bottom: 1px solid #808080;
    color: #555;
    background: #CCC;
    }


    Notes: Keep padding consistent for all 'cells.' If the 'cell's' content-length exceeds it's set width, it can break the layout. (One remedy for this is would include wrapping the rows in a 'row' div, but hey, then all you've got is the same code for a table, just with different elements...)
    • CommentAuthorhawke
    • CommentTimeJul 20th 2006
     permalink
    My method is working very well, it's what I use and require only a BR class, so maybe you should try it, other way are good too, but a little bit more complicated for nothing ;)
    • CommentAuthorPettyRider
    • CommentTimeJul 20th 2006 edited
     permalink
    Just realized I could adjust mine to be more semantic using h1 and p elements instead of just div's, then wrap the whole thing in a div element, so you can create specific selectors (actually a table would be most semantic, if you are indeed using tabular data.. that's been said already though).

    I don't see the point in having the line-break when all you have to do is set 'clear: left;' for the first column in the row, or simply clear the next element below it.
  2.  permalink
    It's cool to see all the various approaches to float/clear. I was struggling with this and nifkin pointed out the proper way to use the PiE method for another kind of float. Do any of you guys use it to ensure cross-browser consistency? Does anyone even care about IE-and-Mac support anymore?

    I don't see the point in having the line-break when all you have to do is set 'clear: left;' for the first column in the row, or simply clear the next element below it.

    Agreed, though til recently I was making the same mistake. Hawke, instead of using a break tag, couldn't you just apply the class="clear" to div3?
  3.  permalink
    Hawke: A better example of what I mean.
    • CommentAuthorkmg
    • CommentTimeJul 20th 2006
     permalink
    Dan Cederholm also gives an interesting method in his bulletproof web design book chaper 4 creative floats using definition lists

    http://www.amazon.com/gp/product/0321346939/sr=8-1/qid=1153427423/ref=pd_bbs_1/103-9465093-7978222?ie=UTF8
    • CommentAuthorhawke
    • CommentTimeJul 20th 2006
     permalink
    Yeah it is working Darren, never tough about setting the clear in the div tough, good idea, thanks ;)
    • CommentAuthorPettyRider
    • CommentTimeJul 20th 2006
     permalink
    I think I was just confused about the goal here. I thought he was trying to emulate a table without using tables. That's what I focused my code on.

    Sorry for the mixup.
Add your comments
    Username Password
  • Format comments as (Help)