Results 1 to 9 of 9

Thread: Trouble changing Fixed Fluid page

  1. #1
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Trouble changing Fixed Fluid page

    1) CSS Liquid Layout #2.1

    2) http://www.dynamicdrive.com/style/la...1_fixed_fluid/

    3) I am trying to change the CSS so that the left column will appear at the top of the smaller page instead of at the bottom. I've tried to simply swap the tags in the CSS, but the left column still appears at the bottom. How would I change the CSS so that the left column of the desktop version will move to the top of the smaller-width version?

    Chris

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 263 Times in 255 Posts
    Blog Entries
    56

    Default

    Something like this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dynamic Drive: CSS Liquid Layout #2.1- (Fixed-Fluid)</title>
    
    <style type="text/css">
    
    body {
    font-family: arial; 
    font-size: 18px;
    margin: 0;
    padding:0
    }
    
    #header {
    position: relative; 
    width: 100%; 
    height: auto; 
    display: inline-block;
    background: #EAEAEA; 
    line-height: 35px;
    }
    
    #leftcolumn {
    position: relative; 
    display: table-cell; 
    width: 200px; 
    background: #C8FC98; 
    vertical-align: top;
    padding: 15px;
    line-height: 30px;
    }
    
    #contentwrapper {
    position: relative; 
    display: table-cell; 
    vertical-align: top;
    padding: 15px;
    line-height: 30px;
    }
    
    #footer{
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }
    
    #footer a{
    color: #FFFF80;
    }
    
    .innertube{
    margin: 10px; 
    margin-top: 0;
    }
    
    @media (max-width: 600px){ 
    #contentwrapper {
    display: block!important; 
    }
    #leftcolumn {
    width: 100%
    }
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="header" >
    <div class="innertube" >
    <h1 style="line-height: 40px">CSS Liquid Layout #2.1- (Fixed-Fluid)</h1>
    </div>
    </div>
    
    <div id="leftcolumn" >
    <div class="innertube"><b>Left Column: <em>200px</em></b>
    Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here end
    </div>
    </div>
    
    <div id="contentwrapper" >
    <div class="innertube"><b>Content Column: <em>Fluid</em></b>
    This is just some filler text This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Demo content nothing to read here This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here Demo content nothing to read here This is just some filler text Demo content nothing to read here Demo content nothing to read here Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library 
    </div>
    </div>
    
    <div id="footer">
    <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
    </div>
    
    </body>
    </html>

  3. #3
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I tried using the CSS you gave me, but the left column appears on the right instead of the left in the larger screens.

    Chris
    Quote Originally Posted by molendijk View Post
    Something like this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dynamic Drive: CSS Liquid Layout #2.1- (Fixed-Fluid)</title>
    
    <style type="text/css">
    
    body {
    font-family: arial; 
    font-size: 18px;
    margin: 0;
    padding:0
    }
    
    #header {
    position: relative; 
    width: 100%; 
    height: auto; 
    display: inline-block;
    background: #EAEAEA; 
    line-height: 35px;
    }
    
    #leftcolumn {
    position: relative; 
    display: table-cell; 
    width: 200px; 
    background: #C8FC98; 
    vertical-align: top;
    padding: 15px;
    line-height: 30px;
    }
    
    #contentwrapper {
    position: relative; 
    display: table-cell; 
    vertical-align: top;
    padding: 15px;
    line-height: 30px;
    }
    
    #footer{
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }
    
    #footer a{
    color: #FFFF80;
    }
    
    .innertube{
    margin: 10px; 
    margin-top: 0;
    }
    
    @media (max-width: 600px){ 
    #contentwrapper {
    display: block!important; 
    }
    #leftcolumn {
    width: 100%
    }
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="header" >
    <div class="innertube" >
    <h1 style="line-height: 40px">CSS Liquid Layout #2.1- (Fixed-Fluid)</h1>
    </div>
    </div>
    
    <div id="leftcolumn" >
    <div class="innertube"><b>Left Column: <em>200px</em></b>
    Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here end
    </div>
    </div>
    
    <div id="contentwrapper" >
    <div class="innertube"><b>Content Column: <em>Fluid</em></b>
    This is just some filler text This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Demo content nothing to read here This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here Demo content nothing to read here This is just some filler text Demo content nothing to read here Demo content nothing to read here Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library 
    </div>
    </div>
    
    <div id="footer">
    <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
    </div>
    
    </body>
    </html>

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 263 Times in 255 Posts
    Blog Entries
    56

    Default

    That's odd! Can you put your page online so that I can see what might cause the problem?

  5. #5
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I don't have a site to place my page on. Can someone tell me where I can post my page for free so others can see it and let me know what's wrong?

    Chris

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 263 Times in 255 Posts
    Blog Entries
    56

    Default

    Try jsfiddle.net. You can test HTML, CSS and JavaScript code snippets there, known as 'fiddles'.
    EDIT:
    Or try this. I made it a long time ago for personal use. It's not perfect but good enough for testing. Put your code in the gray box at the top. The result will appear in the box below.

    In the meantime, I've put my code online, see this.
    Last edited by molendijk; 11-11-2019 at 06:24 PM.

  7. #7
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK, here is my jsfiddle site for you to take a look at my code: https://jsfiddle.net/chrscote/92z76e1v/5/.

    I have some javascript that is supposed to fill in some sample text into each column, but it doesn't seem to work on jsfiddle. However, if you take all the code that is given and put it into a single html file, you should get some text in the columns, but as you'll see, the Left Column is showing up on the right, though it does get moved to below the Content Column as I want the right-hand column to do.


    Chris

  8. #8
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I just figured out a solution. If you look at my jsfiddle code, by moving the left column div above the content wrapper div, it works perfectly.

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 263 Times in 255 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by chrscote View Post
    I just figured out a solution. If you look at my jsfiddle code, by moving the left column div above the content wrapper div, it works perfectly.
    That's also what I had in the code I gave you. So what you did in your fiddle is not what I proposed, view souce of this.

Similar Threads

  1. Replies: 3
    Last Post: 03-14-2013, 02:55 PM
  2. CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)
    By icoombs in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-17-2009, 10:25 AM
  3. three column layout #3.6- (fluid-fixed-fluid)
    By fifi in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-20-2008, 09:56 AM
  4. Replies: 1
    Last Post: 02-18-2007, 09:15 AM
  5. Replies: 4
    Last Post: 11-09-2006, 12:32 PM

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
  •