CSS Help! When I resize page it sends columns underneath instead of all getting small

Discussion in 'CSS' started by skaggmo, Nov 10, 2010.

0
  1. #1
    I'm new to CSS, so I really appreciate a little help on the learning curve. I found a template I like, but it has a problem when I resize it (ctrl -) the columns stack under each other instead of the whole page getting smaller as a whole. I think the problem is either the padding or maybe the width, but not sure where the width is in this CSS code.

    Here's the template- http://www.skaggmo.com/can/index.html

    Here's the CSS...

    /*
    CANUCKINGTON POST STYLESHEET
    A SKYROCKET LABS FREE XHTML/CSS TEMPLATE
    http://www.skyrocketlabs.com

    */

    /* ARCHITECTURE */

    body {
    font-family: georgia,"times new roman",times,serif;
    font-size: 90%;
    color: #333;
    margin: 0;
    padding: 0;
    background: #fff;
    }

    #top {
    width: 980px;
    height: 40px;
    margin: 0 auto;
    border-bottom: 4px solid #cccc99;
    }

    #header {
    width: 980px;
    height: 110px;
    margin: 0 auto;
    }

    #logo, #ad {
    float: left;
    width: 400px;
    height: 110px;
    }

    #ad {
    width: 580px;
    }

    #nav {
    width: 980px;
    height: 44px;
    margin: 0 auto;
    background: #cccc99;
    }

    #nav-bottom {
    width: 978px;
    height: 42px;
    margin: 0 auto;
    background: #f0f0f0 url(../img/wireframe/nav-bottom-backgr.png) repeat-x;
    border: 1px solid #d0d0d0;
    border-top: none;
    }

    #sub-nav {
    width: 980px;
    height: 45px;
    margin: 0 auto 10px auto;
    }

    #content-wrapper {
    width: 980px;
    min-height: 630px;
    margin: 0 auto;
    overflow: hidden;
    }

    #main {
    float: left;
    width: 660px;
    min-height: 630px;
    margin: 0 20px 0 0;
    }

    #headlines {
    width: 660px;
    min-height: 300px;
    }

    #main-headline {
    float: left;
    width: 400px;
    min-height: 300px;
    padding: 0 19px 0 0;
    border-right: 1px solid #ddd;
    }

    #more-headlines {
    float: right;
    width: 220px;
    min-height: 300px;
    padding: 0 0 0 20px;
    }

    #sidebars {
    float: right;
    width: 279px;
    min-height: 630px;
    padding: 0 0 0 20px;
    border-left: 1px solid #ddd;
    }

    #extras {
    width: 980px;
    height: 290px;
    margin: 0 auto;
    border-bottom: 1px solid #ddd;
    }

    #recommended {
    float: left;
    width: 312px;
    height: 290px;
    margin: 0 20px 0 0;
    padding: 20px 0;
    }

    #programs {
    float: left;
    width: 312px;
    height: 290px;
    margin: 0 10px 0 0;
    padding: 20px 0;
    }

    #cartoon {
    float: left;
    width: 312px;
    height: 290px;
    margin: 0 0 0 10px;
    padding: 20px 0;
    }

    #footer {
    width: 980px;
    height: 60px;
    margin: 0 auto;
    }


    /* TOP MENU */

    #top ul {
    float: right;
    margin: 18px 0 0 0;
    padding: 0;
    list-style: none;
    }

    #top li {
    display: inline;
    font-size: 0.9em;
    line-height: 1.0em;
    margin: 0 0 0 20px;
    padding: 0;
    }

    #top li a {
    color: #000000;
    text-decoration: none;
    }

    #top li a:hover {
    color: #000;
    text-decoration: underline;
    }

    /* MAIN NAV MENU */

    #nav ul {
    float: left;
    margin: 0;
    padding: 0 10px;
    list-style: none;
    }

    #nav li {
    display: inline;
    font-size: 1.0em;
    line-height: 44px;
    text-transform: uppercase;
    margin: 0 29px 0 0;
    padding: 0;
    }

    #nav li.last {
    margin: 0;
    }

    #nav li a {
    color: #fff;
    text-decoration: none;
    }

    #nav li a:hover {
    color: #000;
    text-decoration: none;
    }

    /* MAIN SUB-NAV MENU */

    #sub-nav ul {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #sub-nav li {
    display: inline;
    font-size: 0.9em;
    line-height: 45px;
    text-transform: uppercase;
    color: #666;
    margin: 0 15px 0 0;
    padding: 0;
    }

    #sub-nav li a {
    color: #000;
    text-decoration: none;
    }

    #sub-nav li a:hover {
    color: #000;
    text-decoration: underline;
    }

    #sub-nav li.title {
    color: #cccc00;
    }

    /* FOOTER MENU */

    #footer ul {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #footer li {
    display: inline;
    font-size: 0.9em;
    line-height: 60px;
    color: #666;
    margin: 0 15px 0 0;
    padding: 0;
    }

    #footer li a {
    color: #000;
    text-decoration: none;
    }

    #footer li a:hover {
    color: #000;
    text-decoration: underline;
    }

    /* TYPOGRAPHY */

    #headlines h1, #headlines h2, #headlines h3, #headlines h4, #sidebars h3 {
    font-size: 2.3em;
    font-weight: normal;
    line-height: 1.0em;
    letter-spacing: -1px;
    color: #000;
    margin: 0 0 6px 0;
    }

    #headlines h2, #headlines h3, #sidebars h3 {
    font-size: 1.7em;
    }

    #headlines h4 {
    font-size: 1.3em;
    line-height: 1.1em;
    }

    #headlines h3 {
    margin: 0 0 4px 0;
    padding: 12px 0 0 0;
    border-top: 1px solid #ddd;
    }

    #headlines h1 a, #headlines h2 a, #headlines h3 a, #headlines h4 a, #sidebars h3 a {
    color: #000;
    text-decoration: none;
    }

    #headlines h1 a:hover, #headlines h2 a:hover, #headlines h3 a:hover, #headlines h4 a:hover, #sidebars h3 a:hover {
    color: #cccc99;
    text-decoration: underline;
    }

    #headlines h2.heading, #sidebars h2.heading-blue, #sidebars h2.heading {
    font: bold 0.8em arial,verdana,tahoma,sans-serif;
    line-height: 1.0em;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px 0;
    padding: 7px 6px 6px 6px;
    background: #cccc99;
    }

    #sidebars h2.heading-blue {
    background: #2c6fae;
    }

    #sidebars h4 {
    font: bold 1.0em arial,verdana,tahoma,sans-serif;
    line-height: 1.2em;
    margin: 0 0 9px 0;
    padding: 5px 0 0 0;
    }

    #sidebars h4 a {
    color: #cccc99;
    text-decoration: none;
    }

    #sidebars h4 a:hover {
    color: #000;
    text-decoration: underline;
    }

    #main p, #sidebars p {
    font-size: 1.0em;
    line-height: 1.4em;
    margin: 0 0 16px 0;
    }

    #main p.author, #sidebars p.author {
    font: bold 0.8em arial,verdana,tahoma,sans-serif;
    line-height: 1.0em;
    margin: 0 0 10px 0;
    color: #999;
    }

    #main p.author span, #sidebars p.author span {
    color: #2c6fae;
    }

    #main p a, #sidebars p a {
    color: #cccc99;
    text-decoration: none;
    }

    #main p a:hover, #sidebars p a:hover {
    color: #cccc99;
    text-decoration: underline;
    }

    #extras h2.heading {
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.0em;
    letter-spacing: -1px;
    color: #000;
    margin: 0;
    padding: 10px 0;
    border-top: 4px solid #000;
    border-bottom: 1px solid #ddd;
    }

    #extras ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #extras li {
    font-size: 1.0em;
    line-height: 1.3em;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px dotted #ccc;
    }

    #extras li.last {
    padding: 6px 0 0 0;
    border-bottom: none;
    }

    #extras li a {
    color: #000000;
    text-decoration: none;
    }

    #extras li a:hover {
    color: #cccc99;
    text-decoration: none;
    }

    /* IMAGES */

    #logo img {
    border: 0;
    }

    #ad img {
    margin: 15px 0 0 0;
    border: 0;
    }

    #sub-nav img {
    margin: 0 5px 0 0;
    border: 0;
    vertical-align: middle;
    }

    #main-headline img {
    margin: 0 0 6px 0;
    border: 0;
    }

    #main img.lefty {
    float: left;
    margin: 0 10px 0 0;
    border: 0;
    }

    #main img.righty {
    float: right;
    margin: 0 0 0 10px;
    border: 0;
    }

    #sidebars img.ad, #sidebars img.ad-right {
    margin: 0 24px 24px 0;
    border: 0;
    }

    #sidebars img.ad-right {
    margin: 0 0 24px 0;
    }

    #extras img {
    margin: 8px 0 0 0;
    border: 0;
    }

    /* FORMS */

    fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    }

    #search form {
    margin: 40px 0 0 0;
    }

    .searchfield {
    font: normal 1.0em georgia,"times new roman",times,serif;
    color: #000;
    margin: 0 6px 0 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #aaa;
    }

    .searchbtn {
    font: normal 1.2em georgia,"times new roman",times,serif;
    color: #000;
    margin: 0;
    padding: 2px;
    }
     
    skaggmo, Nov 10, 2010 IP
  2. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #2
    Why are you worried about the "shrinking" of the site?...

    Besides not sure what browser you are getting that result on but Chrome 8, FF 3.6, Opera, Safari and IE 8 ( in compatibility mode ) show no movement at all...

    Checked on resolutions of 1024 & 1200 all yielded the same result for me.

    If you still have a problem, please share the browser you are using.

    If you are that concerned about it, you should change your "floats" to "position"...

    Cheers!~
     
    workingsmart, Nov 10, 2010 IP
  3. skaggmo

    skaggmo Well-Known Member

    Messages:
    113
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    130
    #3
    Thanks for responding Workingsmart. I'm using the latest FF browser. My resolution is set at 1024x768. The resolution must be the problem. I have three computers and they're all set at that resolution. Only one of them is new enough to set the resolution higher (and it did look fine when I did) but it's hard to see stuff if I leave it like that.
    Thank you for taking the time. At least I know what's up now.

    But that means anyone who sees the site with 1024x768 or lower will see the columns under each other instead of three columns across.
     
    Last edited: Nov 10, 2010
    skaggmo, Nov 10, 2010 IP
  4. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #4
    It's possible yes... depending on scroll bars, manual browser settings, etc.....
     
    workingsmart, Nov 10, 2010 IP
  5. ronc0011

    ronc0011 Peon

    Messages:
    85
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    It's the floats that are doing it. I love floats because they allow your page to expand to always fill the browser. But one thing you have to do with floats is to set a min-width element in your page. Either in a "wrapper" div or even a "header" div. Something that prevents the page from getting smaller than your total content. Some things will get narrower as the page is shrunk and some things won't. If at any time the total width of the elements is greater than the width of the browser window the floated divs will get pushed to the next line. Also when working floats all "widths" need to be expressed as %. You can however set a min-width as pixels.
     
    ronc0011, Nov 17, 2010 IP