SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive layout code order.

    Responsive layout code order.

    Hi all

    I'm trying to create a simple layout like so

    http://www.ttmt.org.uk/forum/col-1.html

    It's fixed width left column and fluid right column

    When the window is resized i would like the left col to drop below the right col - In this example it doesn't

    I know this is because the code order.

    If I put the left col below the right col when the window resizes it drops below as I would like.

    http://www.ttmt.org.uk/forum/col-2.html

    My problem now Is how do I make the right col stretch so it fills the space.


    Negative Margins
    ----------------

    I know I can do this with negative margins like so

    http://www.ttmt.org.uk/forum/col-3.html

    Is the negative margin the only way - it would add a ton of div's to my code

  2. #2
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display:table-cell responsive layout

    Display:table-cell responsive layout

    Hi all

    I'm trying to create a responsive layout with a fixed width side column on the left and a fluid content column on the right.

    When the window resizes I need the side column to drop below the content.

    I'm trying to use display:table-cell to create the columns

    http://www.ttmt.org.uk/forum/table-cel.html

    This creates the columns but to get the side bar on the left the code for the side bar has to come before the content column

    This means when the window resizes the sidebar goes above the content column.

    Is there anyway to use display:table-cell so the sidebar is on the left but still falls below the content when the window is resized.

    Code:
    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <title>Title of the document</title>
      
      
      
      <style type="text/css">
      
        *{
          margin:0;
          padding:0;
        }
        html, body{
          background:#eee;
          height:100%;
        }
        #wrapper{
          min-height:100%;
          max-width:800px;
          margin:0 auto;
          background:#fff;
          border-left:20px solid #eee;
          border-right:20px solid #eee;
          overflow:auto;
          position:relative;
        }
        
        #sidebar{
          background:yellow;
          width:200px;
          display:table-cell;
          
        }
        #content{
          background:red;
          display:table-cell;
        }
        
        @media only screen and (max-width:500px){
          
          #sidebar{
            display:block;
          }  
          #content{
            display:block;
          }
        }
      </style>
      
      </head>
      
    <body>
      
      <div id="wrapper">
        
         <div id="sidebar">
             <h1>Sidebar</h1>
          </div>
                    
        <div id="content">
          <h1>Content</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      
        
        
        
      </div><!-- #wrappper -->
    
      
      
    </body>
    
    </html>

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I'm sorry, I can't make it work using table-cells.

    Try this... see if it does what you need...

    Code:
    <!DOCTYPE html>
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1001764-Display-table-cell-responsive-layout
    Thread: Display:table-cell responsive layout
    2013.03.14 18:27
    RachelR
    -->
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="robots" content="">
        <title>Title of the document</title>
        <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    html, body {
        background:#eee;
    }
    #wrapper {
        outline:1px solid magenta;
        max-width:800px;
        border-left:20px solid #eee;
        border-right:20px solid #eee;
        position:relative;
        margin:0 auto;
    }
    #sidebar {
        background:yellow;
        width:200px;
        position:absolute;
        top:0;
    }
    #content {
        background:red;
        margin-left:200px;
    }
    @media only screen and (max-width:500px) {
        #sidebar {
            position:static;
        }
        #content {
            margin-left:0;
        }
    }
        </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="content">
            <h1>Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="sidebar">
            <h1>Sidebar</h1>
        </div>
    </div>
    </body>
    </html>
    The flaw is that the content must be taller than the sidebar.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Perhaps this is what you are after?


    Code:
    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <title>Title of the document</title>
      
      
      
      <style type="text/css">
      
        *{
          margin:0;
          padding:0;
        }
        html, body{
          background:#eee;
          height:100%;
        }
        #wrapper{
          max-width:600px;
          padding-left:200px;
          min-height:100%;
          margin:0 auto;
          background:#fff;
          border-left:20px solid #eee;
          border-right:20px solid #eee;
         }
        #wrapper .inner{border-left:200px solid yellow; display: inline-block; background: red; min-width: 100%; margin-left:-200px}
        #sidebar{
          width:200px;
          margin-left:-200px;
          float:left; 
          background: yellow;
          
        }
        #content{
          float:right;background: red;
         }
        
        @media only screen and (max-width:500px){
       	   #wrapper {padding: 0}
           #sidebar, #content{ 
          	float:none;
          	margin:0;
          	width:auto;
          }  
          #wrapper .inner{
            display:block; border: none; min-width: auto; margin: 0; padding:0; 
          }
        }
      </style>
      
      </head>
      
    <body>
      
      <div id="wrapper"><div class="inner">
        <div id="content">
          <h2>Content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
         <div id="sidebar">
             <h2>Sidebar</h2>
         </div>
        
      </div></div><!-- #wrappper -->
    
      
      
    </body>
    
    </html>

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ronpat, dresden_phoenix thanks that's what I was looking for. ronpat solution is going to work better for me.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Perhaps this is what you are after?
    Well, Rachel didn't really sound like she wanted to add an extra div (.inner), and none of her examples showed the Sidebar wider than 200px after shifting, so I stayed within those parameters. To minimize dead space, my example is probably "OK" (or so it seems).

    HOWEVER, YESSSSS!!!! For flexibility, your example is EXACTLY what I started off trying to achieve, but didn't know how!!! Thus, I have added yet another d_p post to my study schedule

    Cheers! (and thanks!)



    EDIT: pipped by Rachel.

    Thank you for the feedback, Rachel. We have fun doing this.

  7. #7
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ronpat, can you recommend any good tutorials / learning resources regarding css layout and page structure.

    The only problems I ever have with CSS are structuring and the framework of pages. Once I have the structure I never have problems

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    That's a pretty headdy question to ask the likes of me.

    The short answer is, "no"... but I hope you will read the rest of this note, anyay.

    You can tell from my example post that I practice indenting as a tool for visualizing the structure of an HTML page. It enables one to easily and quickly tell how containers are stacked and whether or not all tags are properly matched. Missing or mismatched tags can be page breakers.

    For newbies, I would not recommend the HTML5 doctype because its validator does not flag many common structural flaws. Like any new technology, it's experiencing some growing pains, too. There is plenty of time to experiment with HTML5 and learn it well before it becomes sufficiently supported to be considered a "standard". In the meanwhile, HTML 4.01 Strict and XHTML1 Strict are the most stable and widely accepted doctypes in use at this time.

    Personally, I code with HTML 4.01 or XHTML so I can take advantage of the validator.

    CSS resources are everywhere. So much emphasis is being placed on CSS these days that it's easy to forget that good, sound HTML is required for great CSS to perform as intended.

    I can't really recommend any "best" tutorials or books. I've read a few and taken things from all of them. None teaches everything but most teach more than enough to give you a great start. For advanced learning, hanging out here at SitePoint has been the greatest experience of all. I see more variety here than I would have ever seen otherwise.

    The fact that you're concerned about structure is a big plus. So very many people underestimate the importance of good, basic structure to the stability of their code across the growing range of user agents (UA's) in use today.

    Best wishes,
    Ron


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
  •