CCs divs and table layout... baah!!!

Discussion in 'Web Design and Development' started by droplink, Jan 9, 2015.

  1. droplink macrumors member

    Joined:
    Dec 7, 2014
    #1
    I am sure that CSS is great for webdesign and it can do all sort of fancy things, but I just feel like pushing it down a flight a stairs!

    I am trying to get back to doing some websites, and knowing tables are passé, I am trying to use CSS divs to position my elements, but going back to tables is so tempting...

    Here is what I want to do:
    Fiddle

    But I can't for the life of me figure out how to do this with divs.

    Any help ?
     
  2. Jamesbot macrumors member

    Joined:
    Jun 19, 2009
    #2
    CSS grid frameworks make this easy. There are many to choose from, just pick the one you like best.
     
  3. 960design, Jan 9, 2015
    Last edited: Jan 9, 2015

    960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #3
    First, build your site structure without thinking about design.

    I'd build divs inside each section... sheesh... this is hard to explain
    Code:
    <div id='page'>
      <section class='sidebar-left'>
        <div id=''>111</div>
      </section>
      <section class='content'>
        <div id='222'>222</div>
        <span id='555'>555</span>
        <span id='666'>666</span>
      </section>
      <section class='sidebar-right'>
        <div id='444'>444</div>
        <span id='777'>777</span>
        <span id='888'>888</span>
      </section>
    </div><!--end_page-->
    
    Actually, depending on content I could use classes and ids. I'd try to keep it structurally agnostic so that I could possibly remove the 'sidebar-left' in a small mobile device view, and move the 'sidebar-right' underneath the 'content'... all with CSS. Or a million different ways to display the content with different devices.

    Then style them with CSS; the part you are having trouble with.

    You could float=left 'sidebar-left' and float=right 'sidebar-right', but I'd recommend using display='inline-block' for all sections with a width of something like 30% for each, centered within the 'page div'.

    There's a million ways to do this... without knowing the purpose or platform, I can only reproduce your example ( without the table borders - if you need those I think you can handle it )
    Code:
    .sidebar-left,.content,.sidebar-right{
        display:inline-block;
        width:30%;
    }
    .sidebar-left{
        vertical-align:top;
    }
    
    Example:
    http://jsfiddle.net/2ne588gp/1/
     
  4. droplink thread starter macrumors member

    Joined:
    Dec 7, 2014
    #4
    Thanks, I have searched for a few, but they were not up to my liking :)

    Ahhh!!! Now that is what I want to build!
    I could steal your code and be dune with it, but I want to understand it :)

    What is this ?
    Code:
    .sidebar-left, .content, .sidebar-right
    I am unfamiliar with that writing ?

    Here is my previous meager attempt:
    http://jsfiddle.net/w7urw1uc/
     
  5. 960design, Jan 11, 2015
    Last edited: Jan 11, 2015

    960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #5
    This is CSS shorthand.

    In this case I shortened the code by comma separating the values and gave them all the same styling. I could have done it this way as well:
    Code:
    .sidebar-left{
      display:inline-block;
      width:30%;
    }
    .content{
      display:inline-block;
      width:30%;
    }
    .sidebar-right{
      display:inline-block;
      width:30%;
    }
    
    My structure comment ( after looking at your example ):
    <div> is a block element; kinda like a <p> or <h1>
    <span> is an inline element.

    Try not to <div> your page to death. It just takes a little practice, but structurally your page would have been better served using <span> for the <div class='item'>. Please take my meager advice with a HUGE grain of salt, as there are literally hundreds of ways to do this. As long as you understand it and the job gets done, no one really cares how pretty code behind the vail is.
     

Share This Page