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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    window resizing issue

    I am fairly new to css and am having some issues. I am trying to create a three column layout with a header and a footer. When you resize the web browser and make it smaller, the content in the middle and right column disappear. Also, I am forcing the footer to the bottom by specifying a height attribute. I know this must be possible without specifying a height but I'm not sure how. Maybe with a position or float. An example of this issue can be found at www.behrit.com/test. Thanks for any help below is the css:

    Code:
    .full
    {
    width: 100%;
    border: 1px solid #000;
    overflow: hidden;
    height: 700px;
    }
     
    .left
    {
    /*clear: left;*/
    float: left;
    width: 15%;
    height: 700px;
    border: 1px solid #000;
    background-image:url(../img/grey.gif);
    background-repeat: repeat-y top center;
    }
     
    .center
    {
    height: 700px;
    min-width: 770px;
    width: 69%;
    float: left;
    overflow: hidden;
    border: 1px solid #000;
    }
     
     
    .right
    {
    height: 700px;
    width: 15.5%;
    float: left;
    border: 1px solid #000;
    background-image:url(../img/grey.gif);
    background-repeat: repeat-y top center;
    }
    .header
    {
    height:150px;
    border: 1px solid #000;
    min-width: 770px;
    overflow: hidden;
    }
    .body
    {
    height: 486px;
    border: 1px solid #000;
    min-width: 770px;
    }
    .footer-container
    {
    height: 30px;
    border: 1px solid #000;
    background-color: maroon;
    min-width: 700px;
    font-family: verdana, arial, sans serif; 
    color: white;
    }
    .footer
    {
    margin-top:4px;
    }
    .banner
    {
    font: Arial, sans-serif, larger;
    }
     
    .content1 {float: left; width: 500px; margin: 0px; padding: 0px 0px 10px 20px; color: rgb(75,75,75);}
     
    .content1-pagetitle {
        overflow: hidden;
        width: 480px;
        margin: 0px 0px 10px 0px;
        padding: 0px 0px 2px 0px;
        border-bottom: solid 3px black;
    );    color: rgb(148,27,18);
        font-weight: bold;
        font-size: 180%;
    }
     
     
     
    .content1-container {clear: both; float: left; width: 480px; margin: 0px 0px 15px 0px; padding: 0px;}
    .content1-container-1col {overflow: hidden; width: 480px; margin: 0px; padding: 0px;}
    .content-txtbox-noshade {margin: 0px; padding: 7px 0px 0px 0px; background-color: rgb(255,255,255);}
     
    .content2 {
    color: rgb(75,75,75);
    }
    content2-text{
        font-weight: bold;
        font-size: 180%;
    }
     
     
    .buffer {clear: both; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255) border-right-color: black;}
     
    .nav1
    {
    height: 25px;
    border: 1px solid #000;
    background: transparent;
    min-width:700px;
    }
    .nav1 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: .70em;}
    .nav1 ul {float: left; width: 100%; margin: 0px; padding: 0px; border-top: solid 1px rgb(251,253,47); border-bottom: solid 1px rgb(251,253,47); background-color: maroon; font-weight: bold;}    
    .nav1 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
    .nav1 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(251,253,47); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
    .nav1 a.selected {color: rgb(255,215,0); text-decoration: none;}
    .nav1 a:hover {color: rgb(255,255,0); text-decoration: none;}
     
    .nav3 {overflow: hidden; clear: both; float: left; width: 160px; min-height: 500px; margin: 0px; padding: 0px; color: rgb(75,75,75); font-size: .70em;}
    .nav3 ul {width: 160px; margin: 0px 0px 20px 0px; padding: 0px; border-bottom: solid 1px rgb(216,206,159); background-color: rgb(255,255,255);}    
    .nav3 li {list-style: none; margin: 0px; padding: 0px;}
    .nav3 li.title {margin: 0px 0px 0px 0px; padding: 3px 5px 2px 15px; background-color: rgb(128,0,0); color: rgb(255,255,255); text-transform: uppercase; font-weight: bold; font-size: 120%;}
    .nav3 li.group a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 15px; border-top: solid 1px rgb(200,200,200); border-left: solid 7px rgb(165,73,81); color: rgb(75,75,75); font-weight: bold; font-size: 120%;}
    .nav3 li a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 20px; border-left: solid 7px rgb(219,230,241); color: rgb(75,75,75); text-decoration: none; font-size: 120%;}
    .nav3 li a.selected {border-left: solid 7px rgb(128,0,0); color: rgb(100,100,100); text-decoration: none;}
     
    .nav3 li a:hover {border-left: solid 7px rgb(128,0,0); color: rgb(100,100,100); text-decoration: none;}
    Last edited by Apostropartheid; 11-22-2008 at 07:45 PM. Reason: Edited to add code tags (yes, it really is THAT annoying)

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mperzel,
    Have a look at a 3-column I've done with a footer that sticks to the bottom until there is content, from any column, to push it down.

    link
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, this is really close to what I am looking to code. I haven't had a chance to go through your code and see how you did it differently. I am still interested in knowing why the content disappears when the window is resized for future reference if anyone knows.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by mperzel View Post
    Thanks, this is really close to what I am looking to code. I haven't had a chance to go through your code and see how you did it differently. I am still interested in knowing why the content disappears when the window is resized for future reference if anyone knows.
    It's your .min-width: 770px; on .content
    In IE7 and FF .content disappears when the window is less than 770px. IE7 ignores min-width settings so .content stays visible.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mperzel (11-24-2008)

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay so I took the css from your example and changed a few things such as colors and the header height but this introduced a new problem. In firefox, after the content section there is a small bar of background color that shows and then the footer. IE doesn't have this issue. I think my problem is I increased the header height which "pushed" everything else down. I don't understand what keeps the footer at the bottom of the page so a brief explanation would be appreciated. Thanks! An example of the problem can be seen at www.behrit.com/Takedown

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Play with that negative margin in #footer, should do the trick.
    Code:
    #footer{
    	width: 798px;
    	height: auto;
    	clear: both;
    	border: 2px solid #000;
    	background-color: maroon;
    	font-family: verdana, arial, sans serif;
    	color: white;
    	font-size: 1.2em;
    margin: -20 auto 0 auto;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Quote Originally Posted by mperzel View Post
    Okay so I took the css from your example and changed a few things such as colors and the header height but this introduced a new problem. In firefox, after the content section there is a small bar of background color that shows and then the footer. IE doesn't have this issue. I think my problem is I increased the header height which "pushed" everything else down. I don't understand what keeps the footer at the bottom of the page so a brief explanation would be appreciated. Thanks! An example of the problem can be seen at www.behrit.com/Takedown
    You are using an extra float to the content and there by some extra clears. To make a 2-column layout, there is no need to apply floats to the two columns. Instead apply a float+some width to the either of one (small one would be easy) , and some adequate margin to the other one. Check http://bonrouge.com/2c-hf-fixed.php

    Now, in your case, have a try by
    Code:
    .content1 {/*Takedown (line 44)*/
    color:#4B4B4B;
    /*float:left;*/
    margin-left:170px; /* > width of left column */
    padding:0px 0px 10px 20px;
    /*width:500px;*/
    }
    .content1-pagetitle {
    border-bottom:3px solid black;
    color:#941B12;
    font-size:180%;
    font-weight:bold;
    margin:0px 0px 10px;
    overflow:hidden;
    padding:0px 0px 2px;
    /*width:480px;*/
    }
    .content1-container {
    /*clear:both;
    float:left;*/
    margin:0px 0px 15px;
    padding:0px;
    /*width:480px;*/
    }
    btw, make sure that you don't have any divitis
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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