Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. CSS Three Column Layout - Column Height Problem

CSS Three Column Layout - Column Height Problem

Scheduled Pinned Locked Moved Web Development
csharphtmlcssdockerarchitecture
13 Posts 4 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • U Uros Calakovic

    Thank you for the answer. I realize that this is possible to achieve using tables (although I haven't tried it).

    The bearing of a child takes nine months, no matter how many women are assigned.

    U Offline
    U Offline
    Uros Calakovic
    wrote on last edited by
    #4

    Actually, what I did wrong was putting the header and footer DIVs into the container DIV along with the three columns. When I put them out the layout works better:

    <body>

    <div id="top">
        <h1>Header</h1>
    </div>
    
    <div id="container">
        <div id="leftnav">
            <p>Left bar</p>
        </div>
        <div id="rightnav">
            <p>Right bar</p>
        </div>
        <div id="content">
            <p>Content</p>
        </div>
    </div>
    
    <div id="footer">
        <h4>Footer</h4>
    </div>
    

    </body>

    The bearing of a child takes nine months, no matter how many women are assigned.

    N 1 Reply Last reply
    0
    • U Uros Calakovic

      Actually, what I did wrong was putting the header and footer DIVs into the container DIV along with the three columns. When I put them out the layout works better:

      <body>

      <div id="top">
          <h1>Header</h1>
      </div>
      
      <div id="container">
          <div id="leftnav">
              <p>Left bar</p>
          </div>
          <div id="rightnav">
              <p>Right bar</p>
          </div>
          <div id="content">
              <p>Content</p>
          </div>
      </div>
      
      <div id="footer">
          <h4>Footer</h4>
      </div>
      

      </body>

      The bearing of a child takes nine months, no matter how many women are assigned.

      N Offline
      N Offline
      NeverHeardOfMe
      wrote on last edited by
      #5

      Nice enough in Firefox and Chrome - you might want to look at it in IE though...

      U 1 Reply Last reply
      0
      • N NeverHeardOfMe

        Nice enough in Firefox and Chrome - you might want to look at it in IE though...

        U Offline
        U Offline
        Uros Calakovic
        wrote on last edited by
        #6

        It looks like this[^] in IE 8. Do you mean it doesn't display in earlier IE versions or I am missing something? (Or something else - I am very new at this.)

        The bearing of a child takes nine months, no matter how many women are assigned.

        N 1 Reply Last reply
        0
        • U Uros Calakovic

          It looks like this[^] in IE 8. Do you mean it doesn't display in earlier IE versions or I am missing something? (Or something else - I am very new at this.)

          The bearing of a child takes nine months, no matter how many women are assigned.

          N Offline
          N Offline
          NeverHeardOfMe
          wrote on last edited by
          #7

          hmm.. here[^] it is my IE8... go figure...

          U 2 Replies Last reply
          0
          • N NeverHeardOfMe

            hmm.. here[^] it is my IE8... go figure...

            U Offline
            U Offline
            Uros Calakovic
            wrote on last edited by
            #8

            :omg: Now I'm really confused. Why are we getting two different pages?

            The bearing of a child takes nine months, no matter how many women are assigned.

            N 1 Reply Last reply
            0
            • N NeverHeardOfMe

              hmm.. here[^] it is my IE8... go figure...

              U Offline
              U Offline
              Uros Calakovic
              wrote on last edited by
              #9

              Never mind, I think I figured it out - off to learn about quirks mode.[^]. This is getting quite interesting.

              The bearing of a child takes nine months, no matter how many women are assigned.

              N 1 Reply Last reply
              0
              • U Uros Calakovic

                :omg: Now I'm really confused. Why are we getting two different pages?

                The bearing of a child takes nine months, no matter how many women are assigned.

                N Offline
                N Offline
                NeverHeardOfMe
                wrote on last edited by
                #10

                (Been distracted by World Cup final...) Well, such are the joys of CSS. Come back tables, all is forgiven....

                1 Reply Last reply
                0
                • U Uros Calakovic

                  Never mind, I think I figured it out - off to learn about quirks mode.[^]. This is getting quite interesting.

                  The bearing of a child takes nine months, no matter how many women are assigned.

                  N Offline
                  N Offline
                  NeverHeardOfMe
                  wrote on last edited by
                  #11

                  Actually, my fault here: I hadn;t specified a doctype in my html - add

                  and it works fine in IE8... ..however, I suspect you'll still find you have problems in the imfamous IE6 (and below...), if that worries you. (It was back in those days I last looked at this problem, and quickly realised I was on to a hiding to nothing. I guess things have improved a bit since then...)

                  1 Reply Last reply
                  0
                  • N NeverHeardOfMe

                    ha ha welcome to the weird and wonderful world of CSS.... there are entire websites devoted to this very topic, books even, and I wouldn't be surprised if there was a goddam TV series as well. Can't be done, is the simple answer. The slightly longer one is that it can, but the hacks required will be too browser-specific to make it usable in the real world. If you can get away with fixed-width columns you can force an answer using a background image. Otherwise, my serious advice (which will save you hours if not days of stress and frustration) is to use a table-based layout. Problem solved in two minutes. (And if anyone tries to tell you you can't use tables for web-page layout, just look pityingly at them, smile knowingly and walk away...)

                    D Offline
                    D Offline
                    Dalek Dave
                    wrote on last edited by
                    #12

                    I mix Tables in Divs all the time. Makes for neat presentation and ease of use. Bollocks to the CSS Nazis who say it is wrong, If it works, it is right.

                    ------------------------------------ I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave

                    M 1 Reply Last reply
                    0
                    • D Dalek Dave

                      I mix Tables in Divs all the time. Makes for neat presentation and ease of use. Bollocks to the CSS Nazis who say it is wrong, If it works, it is right.

                      ------------------------------------ I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave

                      M Offline
                      M Offline
                      Martin Jarvis
                      wrote on last edited by
                      #13

                      With IE, using tables (particularly large wrapping layout tables) can cause an apparent delay with each page load (as IE doesn't render a table until it hits the close tag). If you can live with it, then there's no reason why not in my book.


                      Freestyle Interactive Ltd | Martin on .Net

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • World
                      • Users
                      • Groups