SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Location
    somewhere over the rainbow
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS 3 column and dynamic DIV column height

    Hello,

    I've searched and found relavant threads and url references along with having visited some of those CSS example sites. I apologize if this specific question has been answered before, but the solutions I've tried just have refused to work for me. Here is the basic scenario:

    CSS newbie : CHECK
    Bought, read and studied HTML Utopia book : CHECK
    Viewed, searched forum and tried various solutions : CHECK
    Still can't get the CSS layout to work for me : DOUBLECHECK

    Okay on to my problem...I have a basic 3 column layout - leftcontent, centercontent, and rightcontent. Left and right content are dynamically generated menu content from a database..I wish to have a footer positioned at the very bottom of every page, BELOW the end of left or right content no matter how high they might be...I should mention leftcontent and rightcontent are fixed width, only vary in their height depending on how much data is pulled on a particular display page. That is my problem - I can't for the life of me get this to work...On some pages where one of the left or right columns is too long, they are truncated and the footer appears inside left and right underneath center content...Confused enough???

    Okay here is my CSS (note I have commented out the floats and I know this won't work with absolute positioning, but using the floats doesn't work either and screws up the display even worse) But I am totally prepared to be enlightened and educated and any of your expertise/analysis/insights are gratefully accepted.

    Code:
    #rightcontent {
    /* float:right; */
     position:absolute;
     right:9px;
     top:116px;
     width:150px;
     background:#fff;
     border:1px solid #FFBDBD;
     font-size:9px;
     }
    #leftcontent {
    /* float:left; */
     position:absolute;
     left:10px;
     top:116px;
     width:150px;
     background:#fff;
     border:1px solid #FFBDBD;
     font-size:9px;
     }
    #centercontent {
     background:#fff;
     margin-left:151px;
     margin-right:151px;
     /*
     IE5x PC mis-implements the box model. Because of that we sometimes have
     to perform a little CSS trickery to get pixel-perfect display across browsers.
     The following bit of code was proposed by Tantek Celik, and it preys upon a CSS
     parsing bug in IE5x PC that will prematurly close a style rule when it runs
     into the string "\"}\"". After that string appears in a rule, then, we can override
     previously set attribute values and only browsers without the parse bug will
     recognize the new values. So any of the name-value pairs above this comment
     that we need to override for browsers with correct box-model implementations
     will be listed below.
     We use the voice-family property because it is likely to be used very infrequently,
     and where it is used it will be set on the body tag. So the second voice-family value
     of "inherit" will override our bogus "\"}\"" value and allow the proper value to
     cascade down from the body tag.
     The style rule immediately following this rule offers another chance for CSS2
     aware browsers to pick up the values meant for correct box-model implementations.
     It uses a CSS2 selector that will be ignored by IE5x PC.
     Read more at http://www.glish.com/css/hacks.asp
     */
     voice-family: "\"}\"";
     voice-family: inherit;
     margin-left: 151px;
     margin-right:151px;
     font-size:14px;
     }
    #banner {
     background:#fff;
     height:115px;
     border-top:1px solid #FFF;
     border-right:1px solid #FFF;
     border-left:1px solid #FFF;
     voice-family: "\"}\"";
     voice-family: inherit;
     height:115px;
     }
    #rowspacer {
     background:#fff;
     margin-left: 151px;
     margin-right:151px;
     voice-family: "\"}\"";
     voice-family: inherit;
     margin-left: 151px;
     margin-right:151px;
     font-size:14px
     }
    p,h1,pre {
     margin:0px 10px 10px 10px;
     }
    h1 {
     font-size:16px;
     padding-top:10px;
     }
    #banner h1 {
     font-size:14px;
     padding:10px 10px 0px 10px;
     margin:0px;
     }
    #leftcontent h1 {
     padding:3px 3px 3px 10px;
     color:white;
     background:#FF7B84;
     font-size:14px;
     margin:0px 0px 5px 0px;
     }
    #rightcontent h1 {
     padding:3px 3px 3px 10px;
     color:white;
     background:#FF7B84;
     font-size:14px;
     margin:0px 0px 5px 0px;
     }
    ul#mainmenu {
     list-style: none;
     margin: 0;
     padding: 0;
     }
    ul#mainmenu li a:link, ul#mainmenu li a:visited {
     display: block;
     width: 92%;
     padding: 4px 4%;
     font: 11px Verdana, Arial, Helvetica, sans-serif;
     color: blue;
     }
    #rightcontent form {
     width: 92%;
     margin: 0;
     padding: 4px 4%;
     }
    #footer {
     clear: both;
     margin: 0px;
     padding: 6px;
     text-align: center;
     }
    Thanks for listening!
    SafetyNet Web - Quality Web Hosting

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay first off, if you want the footer beneath everything then you must do it the layout with floats. Positioned layout just doesn't allow for it. Ditch the absolute positioning and give a link to what you come up with.

  3. #3
    SitePoint Member
    Join Date
    Jan 2003
    Location
    somewhere over the rainbow
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul for your reply.
    I have removed the absolute positioning rules and re-engaged the float rules...

    go to this page first
    http://www.treasure-house.com/page/e...ouse/test.html

    then look in the right column under "Of Interest" and click on the link that says "Coloring Books - Embracing Color". That should show you what I mean....that stuff at the bottom of the center column like Privacy and contact webmaster should all be part of a footer that appears below any of the longest of the columns.

    I have that stuff enclosed in a footer container like this
    <div id="footer">
    footer content here
    </div>

    Any ideas? Thanks.
    SafetyNet Web - Quality Web Hosting

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possiable to post a link to the page you are having a problem with?
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I looked at your page, I believe your div's with the content is too wide. Thats why the right sidebar is at the bottom.
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  6. #6
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have multiple elements with the same id. Ids must be unique on a page.
    When you float your left and right columns in the margins of your center column you must place the <div>s for the left and right columns before the center column in your html.

  7. #7
    SitePoint Member
    Join Date
    Jan 2003
    Location
    somewhere over the rainbow
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul_C
    You have multiple elements with the same id. Ids must be unique on a page.
    When you float your left and right columns in the margins of your center column you must place the <div>s for the left and right columns before the center column in your html.
    Thank you Paul...That fixed me right up...I'm learning more every minute...

    Thanks again.
    SafetyNet Web - Quality Web Hosting

  8. #8
    SitePoint Member
    Join Date
    Jan 2003
    Location
    somewhere over the rainbow
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, after Paul C.'s quick and to the point expertise, I've changed my style sheet to this:

    Code:
    body {
     margin:0px 10px 0px 10px;
     padding:0px;
     }
    #rightcontent {
     float:right;
     right:9px;
     top:116px;
     width:150px;
     background:#fff;
     border:1px solid #FFBDBD;
     font-size:9px;
     }
    #leftcontent {
     float: left;
     left: 10px;
     top: 116px;
     width: 150px;
     background: #fff;
     border: 1px solid #FFBDBD;
     font-size:9px;
     }
    #centercontent {
      background-color: white;
     margin-left: 151px;
     margin-right: 151px;
     padding-bottom: 50px;
     font-size: 16px;
     }
    #banner {
     background:#fff;
     height: 115px;
     border-top: 1px solid #FFF;
     border-right: 1px solid #FFF;
     border-left: 1px solid #FFF;
     }
    #banner h1 {
     font-size:14px;
     padding:10px 10px 0px 10px;
     margin:0px;
     }
    #leftcontent h1 {
     padding:3px 3px 3px 10px;
     color:white;
     background:#FF7B84;
     font-size:14px;
     margin:0px 0px 5px 0px;
     }
    #rightcontent h1 {
     padding:3px 3px 3px 10px;
     color:white;
     background:#FF7B84;
     font-size:14px;
     margin:0px 0px 5px 0px;
     }
    .mainmenu ul {
     list-style: none;
     margin: 0;
     padding: 0;
     }
    .mainmenu ul li a:link, .mainmenu ul li a:visited {
     display: block;
     width: 92%;
     padding: 4px 4%;
     font: 11px Verdana, Arial, Helvetica, sans-serif;
     color: blue;
     }
    #rightcontent form {
     width: 92%;
     margin: 0;
     padding: 4px 4%;
     }
    #footer {
     clear: both;
     margin: 0px;
     padding: 6px;
     text-align: center;
     }
    .content {
     position: relative; 
     width: 94%;
     margin-left: auto;
     margin-right: auto;
     min-width: 120px;
     border-bottom: 1px solid blue;
     background-color: white;
     padding: 10px;
     z-index: 3;
     font-size: 14px; 
     font-family: verdana, arial, helvetica, sans-serif;
     }
    p,pre {
     margin: 5px 5px 2px 5px;
     }
    h1 {
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 16px;
     margin: 0;
     padding: 0;
     }
    The center column at http://www.treasure-house.com/page/s...ouse/test.html is a series of news articles, with images. Problem is that it looks fine in IE6 but in Mozilla 1.3, subsequent news articles as they descend down the page don't "clear" the images from the article above so they run together. If I use "clear: both" then the whole center column gets pushed down below my right and left floating columns of content. Make sense? Any insights...I'm truly having a blast with this CSS and the HTML Utopia book, but obviously I have a way to go in my implementation of same. Thank you for any insight, cheers, and/or jeers
    SafetyNet Web - Quality Web Hosting

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try adding <br style="clear:both"> before the end of each of the centre content divs. (or give the <br> a class with clear:both etc)

    Better still add a <p>With Some more content</p> at the end of each centre content div and then give each last paragraph a class that includes "clear:both". In this way the text will always be pushed down by the pictures before the start of the next div.

    Hope this helps.

    Paul

    BTW why not use css to float those centre images and get rid of the align-right/align=left and it will tidy the mark up a bit.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I also noticed that you have about 87 small errors according to the w3c validator. It would be a good idea to fix them in case they upset something else.

    They're mostly small errors and should only take a few minutes to fix.

    Paul

  11. #11
    SitePoint Member
    Join Date
    Jan 2003
    Location
    somewhere over the rainbow
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B for responding...okay will follow your suggestions and get back with my results.

    Thanks
    SafetyNet Web - Quality Web Hosting

  12. #12
    SitePoint Member
    Join Date
    Jan 2003
    Location
    somewhere over the rainbow
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B!

    For now I'm using your <br style=clear:both;> suggestion...quick easy and it works perfectly! Now to go fix those validation errors...Thanks again Paul.
    SafetyNet Web - Quality Web Hosting


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
  •