SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 columns, html order?

    Hi all

    I have a demo here: http://www.ttmt.org.uk/cols/col1.html

    It's just 2 columns, col2 has a set width and floated to the right.

    Col1 is on the left and takes up the rest of the page, it has a right margin where col2 sits.

    In this example col2 comes before col1 in the html

    Code:
      
      <div id="content">
        <div id="right-col" class="col">
           <h2>Col 2</h2>
        </div>
        
         <div id="left-col" class="col">
            <h2>Col 1</h2>
         </div>
      </div>
    Is it possible to have the same layout but have col1 first in the html.

    http://www.ttmt.org.uk/cols/col2.html

    Code:
    <!DOCTYPE html>
    <html lang="en">
       <meta charset="UTF-8">
    
       <style type="text/css">
          *{
          margin:0;
          padding:0;
          }
          html,body{
          height:100%;
          }    
          #wrap{
          min-height:100%;
          }
          #content{
          padding-bottom:50px;
          min-height:100%;
          }
          header{
          height:100px;
          background:green;
          }
          .col{
          height:500px;
          }
          #left-col{
          background:#ccc;
          margin-right:320px;
          
          }
          #right-col{
          background:#888;
          width:300px;
          float:right;
          }
          footer{
          position:relative;
          margin-top:-50px;
          height:50px;
          background:red;
          }
          
          @media only screen and (max-width:800px){
            #right-col{
              float:none;
            }
          }
          
       </style>
       <title>Title of the document</title>
       </head>
       <body>
          <div id="wrap">
             <header>
                <h2>Header</h2>
             </header>
             <div id="content">
               
               <div id="left-col" class="col">
                  <h2>Col 1</h2>
               </div>
               
               
               <div id="right-col" class="col">
                  <h2>Col 2</h2>
               </div>
                          
             </div>
          </div>
          <footer>
             <h2>Footer</h2>
          </footer>
       </body>
    </html>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ttmt View Post
    Is it possible to have the same layout but have col1 first in the html.
    Try this...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    <!--
    http://www.sitepoint.com/forums/showthread.php?1180975-2-columns-html-order
    Thread: 2 columns, html order?
    2013.12.02 08:35
    ttmt
    For more information, see: http://www.sitepoint.com/forums/showthread.php?1179478-Test-Your-CSS-Skills-Number-44-Re-order-content
    -->
        <title>Reorder Content</title>
        <style type="text/css">
    * {
        padding:0;
        margin:0;
    }
    html,body {
        height:100%;
    }
    #wrap {
        min-height:100%;
    }
    #content {
        display:table;
        width:100%;
        min-height:100%;
        padding-bottom:50px;
    }
    header {
        height:100px;
        background:green;
    }
    .col {
        height:500px;
    }
    #left-col {
        display:table-cell;
        background:#ccc;
    }
    #right-col {
        display:table-cell;
        width:300px;
        background:#888;
    }
    footer {
        position:relative;
        height:50px;
        background:red;
        margin-top:-50px;
    }
    
    @media only screen and (max-width:800px) {
        #right-col {
            display:table-header-group;
        }
    }
       </style>
       <title>Title of the document</title>
    </head>
    <body>
    
    <div id="wrap">
        <header>
            <h2>Header</h2>
        </header>
        <div id="content">
            <div id="left-col" class="col">
                <h2>Col 1</h2>
            </div>
            <div id="right-col" class="col">
                <h2>Col 2</h2>
            </div>
        </div>
    </div>
    <footer>
       <h2>Footer</h2>
    </footer>
    
    </body>
    </html>
    For more information, see: http://www.sitepoint.com/forums/show...-order-content

    Cheers

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ttmt View Post
    Is it possible to have the same layout but have col1 first in the html.
    I already gave you an answer to this in your other thread with a full example including sticky footer.

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B and sorry I missed the first answer


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
  •