WEB Floating divs for a grid

Discussion in 'OT Technology' started by TrenT, Mar 11, 2010.

  1. TrenT

    TrenT OT Supporter

    Joined:
    Aug 27, 2002
    Messages:
    10,561
    Likes Received:
    32
    Location:
    NYC
    I'm having some trouble getting getting a grid like effect laying out this menu.
    I think the height of each div is throwing it off occasionally, causing these gaps:

    [​IMG]

    Here is the code:

    HTML:
    Code:
    <div class='float''><p class='itemTitle'>CHICKEN TENDERS</p>
     <p class='itemDescription'>Handbreaded and fried to a golden brown. Served on a bed of fries with a side of honey mustard, ranch, gravy or barbeque sauce. Also available Buffalo or Yaddi style.</p></div>
    <div class='float''><p class='itemTitle'>WINGS</p>
     <p class='itemDescription'>Our famous chicken wings served with bleu cheese and celery. Served MILD, MEDIUM, BARBEQUE, NORTH CAROLINA BBQ, ATOMIC, HONEY GARLIC or CARRIBEAN JERK. For that fresh off the grill flavor, try your wings Yaddi style.</p></div>
    <div class='float''><p class='itemTitle'>CHEESE STICKS</p>
     <p class='itemDescription'>Sticks of tasty mozzarella breaded and fried. Served with a side of our house marinara sauce.</p></div>
    <div class='float' highlight'><p class='itemTitle'>CHIPS & SALSA</p>
     <p class='itemDescription'>Fresh tortilla chips with traditional salsa.</p></div>
    <div class='float''><p class='itemTitle'>BUNCH O'NACHOS</p>
     <p class='itemDescription'>Tortilla chips loaded with refried beans, taco meat, nacho cheese sauce, lettuce, tomatoes, jalapenos, guacamole, sour cream, and green onions.</p></div>
    <div class='float''><p class='itemTitle'>ONION RINGS</p>
     <p class='itemDescription'>A generous portion of our famous onion rings beer battered and fried to a golden brown, served with ranch dressing.</p></div>
    <div class='float''><p class='itemTitle'>QUESADILLAS</p>
     <p class='itemDescription'>Tortilla filled with melted cheddar and monterey jack cheeses and pico de gallo.</p></div>
    <div class='float''><p class='itemTitle'>CHORIZO QUESO DIP</p>
     <p class='itemDescription'>Talk of the Town?s signature cheese dip. We take fresh cheeses add authentic chorizo Mexican sausage, tomatoes, jalapenos and, onions. Cook it to perfection and serve it with fresh chips!</p></div>
    
    CSS:

    Code:
    #menuDisplay .float {
        width:400px;
        margin-right:20px;
        float:left;
        margin-bottom:40px;
        margin-top:-20px;
    }
    #menuDisplay .itemTitle {
        font-weight:bold;
        font-size:18px;
        padding-left:20px; padding-right:10px;
    }
    #menuDisplay .itemDescription {
        font-weight:12px;
        line-height:19px;
    }
    
    any ideas? I'm new to css :hsd:
     
  2. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,925
    Likes Received:
    11
    Location:
    Los Angeles
    You have an extra single quote in your HTML.

    Code:
    <div class='float'><p class='itemTitle'>CHORIZO QUESO DIP</p>
    ...but that isn't the problem.

    To create a true resizable grid, you will have to use accompanying javascript to set height dimensions on your elements. I believe there is a jQuery grid plug-in that will automatically do the heavy lifting in this. This cannot be done in pure css, or at least, not in any ways I have found.

    You should also avoid using negative margins as much as possible.
     
  3. TrenT

    TrenT OT Supporter

    Joined:
    Aug 27, 2002
    Messages:
    10,561
    Likes Received:
    32
    Location:
    NYC
    Thanks. I was trying out the negative margins to see if that would fix it..haven't used them anywhere else in the layout.

    I guess it makes sense that you would have to define the height of the grid, otherwise it might as well be a column
     
  4. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,925
    Likes Received:
    11
    Location:
    Los Angeles
  5. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    wouldnt tables be suitable since it looks like it is tabular data?
     
  6. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,925
    Likes Received:
    11
    Location:
    Los Angeles
    It is not tabular data. :o
     
  7. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,652
    Likes Received:
    15
    Location:
    Atlanta
    I would probably use nested divs to get this done if you didn't want to dable with the jquery.
     
  8. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,925
    Likes Received:
    11
    Location:
    Los Angeles
    That required somewhat of a "fixed column" layout. The jQuery plug-in is a solution if you're looking for an all around dynamic layout with as many columns as you without having to break anything. :cool:
     
  9. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,652
    Likes Received:
    15
    Location:
    Atlanta

    this should work (skeleton):
    Code:
    <div style="float:left; width:50%;">
          <div style='width:100%;'>1</div>
          <div style='width:100%;'>3</div>
          <div style='width:100%;'>5</div>
    </div>
    
    <div style="float:right; width:50%;">
          <div style='width:100%;'>2</div>
          <div style='width:100%;'>4</div>
          <div style='width:100%;'>4</div>
    </div>
    
     
  10. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,925
    Likes Received:
    11
    Location:
    Los Angeles
    Right.

    Those are fixed columns though, like I said. The grid solution is more viable for a "dynamic" layout. For example, if you want snippets of articles on your page via wordpress or something. Then all you'd have to do is:

    Code:
    <div id="wrapper">
      <div style="float: left;" />
      <div style="float: left;" />
      <div style="float: left;" />
      <div style="float: left;" />
      <div style="float: left;" />
      <div style="float: left;" />
      <div style="float: left;" />
    </div>
    
    The wrapper element will dictate how many columns will be allowed in the layout by adjusting the width of it. You can essentially have any amount of articles being fed dynamically and you wouldn't ever have to add additional columns via a fixed column layout in HTML. You cannot do this with a fixed column layout in the example you provided.
     
  11. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,330
    Likes Received:
    76
    Location:
    Tasmania
    kingtoad is right, jQuery Masonry is what you want. I use it almost daily, it's awesomesauce.
     
  12. TrenT

    TrenT OT Supporter

    Joined:
    Aug 27, 2002
    Messages:
    10,561
    Likes Received:
    32
    Location:
    NYC
    Ended up using masonry, looks good :coold:
     

Share This Page