Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts

    100% height + floats help.

    I have a three column layout, and I can't quite figure out how to force the columns' heights to reach the bottom of the page so they blend seamlessly with the footer. The footer is stuck to the bottom of the page, and as the content overlaps the viewport the footer follows, but if the content of the page is less than the viewport, the columns don't expand 100% and leave a large gap.

    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
      <head>
        <title>Sciptdaemon</title>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="robots" content="index, follow" />
        <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <div id="container">
          <div id="header">
            <h1>
              <a href="#" title="Back to home">Scriptdaemon</a>
            </h1>
            <!-- Navigation bar start -->
            <div id="navbar">
              <form action="#" id="login" method="post">
                <fieldset>
                  <label for="email">Email:</label>
                  <input id="email" type="text" />
                  <label for="password">Password:</label>
                  <input id="password" type="password" />
                  <input type="submit" value="Log in" />
                </fieldset>
              </form>
            </div>
            <!-- Navigation bar end -->
          </div>
          <div id="content">
            <div id="colmid">
              <div id="colleft">
                <div id="col1">
                <!-- Middle column start -->
                  <h2>To Do</h2>
                  <ol>
                    <li>[bug] Set 100% column height;</li>
                    <li>[feature] Add navigation tabs;</li>
                    <li>[feature] Add breadcrumb navigation;</li>
                    <li>[feature] Add print stylesheet;</li>
                    <li>[feature] Add error pages;</li>
                    <li>[feature] Add text-only sitemap;</li>
                    <li>[feature] Add extended footer;</li>
                    <li>[feature] Add password confirmation script;</li>
                    <li>[test] Shorten line lengths to 45-60 characters;</li>
                    <li>[test] Adjust page width;</li>
                    <li>[test] Add page borders;</li>
                  </ol>
                  <!-- Middle column end -->
                </div>
                <div id="col2">
                  <!-- Right column start -->
                  <h2>Header</h2>
                  <p>Content</p>
                  <!-- Right column end -->
                </div>
                <div id="col3">
                  <!-- Left column start -->
                  <h2>Header</h2>
                  <p>Content</p>
                  <!-- Left column end -->
                </div>
              </div>
            </div>
          </div>
          <div id="footer">
            <p>Copyright &copy; 2009 Scriptdaemon</p>
          </div>
        </div>
      </body>
    </html>
    CSS:

    Code:
    html,body {
    border:0;
    font-family:arial,helvetica,sans-serif;
    font-size:small;
    height:100%;
    margin:0;
    padding:0
    }
    
    body {
    min-width:600px;
    width:100%
    }
    
    h1,h2 {
    color:#ffa500;
    margin:.8em 0 .2em;
    padding:0
    }
    
    h1 {
    font:1.5em georgia,"times new roman",serif
    }
    
    h2 {
    font:700 1.25em georgia,"times new roman",serif
    }
    
    p {
    line-height:1.5;
    margin:.4em .6em .8em;
    padding:0
    }
    
    input {
    background:#fff;
    border:1px solid #808080;
    color:#666;
    font-size:.8em;
    width:10em
    }
    
    input[type="submit"] {
    background:#eee;
    border:1px solid #000;
    color:#666;
    width:4.5em
    }
    
    img {
    border:0
    }
    
    a {
    color:#ffa500
    }
    
    div#container {
    height:auto;
    margin:0 auto;
    min-height:100%;
    position:relative
    }
    
    div#header {
    background:#eee;
    border-bottom:6px double #808080;
    color:#ffa500;
    width:100%
    }
    
    div#header h1 {
    margin:0;
    padding:.4em 15px
    }
    
    div#header a {
    text-decoration:none
    }
    
    div#navbar {
    background:#ddd;
    border-top:4px solid #000;
    color:#000;
    font-weight:700;
    margin:0;
    padding:6px 15px;
    text-align:right
    }
    
    div#navbar form {
    padding:1px 0
    }
    
    div#navbar fieldset {
    border:0;
    padding:0;
    margin:0
    }
    
    div#content {
    background:#eee;
    color:#000;
    overflow:hidden;
    width:100%
    }
    
    div#colmid,div#colleft {
    float:left;
    position:relative;
    width:100%
    }
    
    div#colmid {
    background:#fff;
    border-right:2px solid #808080;
    color:#666;
    right:25%
    }
    
    div#colleft {
    background:#eee;
    border-right:2px solid #808080;
    color:#000;
    right:50%
    }
    
    div#col1,div#col2,div#col3 {
    float:left;
    overflow:hidden;
    padding:0 0 3em;
    position:relative
    }
    
    div#col1 {
    background:#fff;
    color:#666;
    left:102%;
    width:46%
    }
    
    div#col2 {
    left:31%;
    width:21%
    }
    
    div#col3 {
    left:85%;
    width:21%
    }
    
    div#footer {
    background:#ddd;
    border-bottom:4px solid #000;
    border-top:6px double #808080;
    bottom:0;
    color:#666;
    position:absolute;
    text-align:center;
    width:100%
    }
    
    div#footer p {
    margin:0;
    padding:6px 15px
    }
    Last edited by Scriptdaemon; 05-31-2009 at 07:19 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Scriptdaemon (05-31-2009)

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I've seen ones with background images for the columns to accomplish this before and this one does that too, but is there an imageless way?

  • #4
    New Coder
    Join Date
    May 2009
    Location
    Cincinnati
    Posts
    45
    Thanks
    0
    Thanked 4 Times in 4 Posts
    I don't believe there is a way to do this without the use of background images. Tables could accomplish this, but I do not recommend using them.

    However, the link provided only requires one background image, so it's not all that bad.
    Last edited by Relish; 05-31-2009 at 07:04 PM.

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    If there's no other alternative then I guess I'll be forced to use an image, but if someone can figure out an imageless way, if possible, I'd also appreciate it.

    Thank you both.

  • #6
    New Coder
    Join Date
    May 2009
    Location
    Cincinnati
    Posts
    45
    Thanks
    0
    Thanked 4 Times in 4 Posts
    I did find this, but I don't know if it will work correctly as either 100% height or 100% fluid width.

    http://undergroundstylez.net/layout_..._ThreeColumns/

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Relish View Post
    I did find this, but I don't know if it will work correctly as either 100% height or 100% fluid width.

    http://undergroundstylez.net/layout_..._ThreeColumns/
    The difference with that though is that the footer does not stick to the bottom when there exists little to no content.

  • #8
    New Coder
    Join Date
    May 2009
    Location
    Cincinnati
    Posts
    45
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Yeah. Hmm. You could try min-height: 100%; but I don't know if that will work right with that layout.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Those footers also do not stick the the bottom. The percentage layout of this page is actually where I got the idea for this to begin with.

    Unless you are implying that if I used the pixel layout, what I want to accomplish would work if I implemented the footer I have?

  • #11
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Relish View Post
    Yeah. Hmm. You could try min-height: 100%; but I don't know if that will work right with that layout.
    I've tried that and quite a few other things and in the end it all just broke the layout (except the image, which is what I didn't really want to have to do), which is why I had to resort to looking for help.
    Last edited by Scriptdaemon; 05-31-2009 at 08:44 PM.

  • #12
    New Coder
    Join Date
    May 2009
    Location
    Cincinnati
    Posts
    45
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Why do you not want to use images?

  • #13
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Relish View Post
    Why do you not want to use images?
    I wanted to create a basic imageless layout and then go from there when I fill in everything for an actual site.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •