CSS Columns Problem

Discussion in 'HTML and CSS' started by sethmac, Oct 31, 2006.

  1. sethmac

    sethmac

    Joined:
    Oct 31, 2006
    Messages:
    1
    In Firefox my sidebar overlaps my footer, and IE6 it overlaps my footer and then some. Any help would be appreciated. I'm new to CSS, so excuse my poor code.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">




    <head>
    <title>PHI</title>

    <!-- styles suitable for any browser, any media -->
    <style type="text/css" title="Site default">
    body {
    background-color: #fff5e1;
    color: #000;
    }
    a:link {
    color: #00c;
    background-color: transparent;
    }
    a:visited {
    color: #909;
    background-color: transparent;
    }
    a:hover {
    color: #513600;
    background-color: transparent;
    }
    </style>

    <!-- hide these rules from legacy browsers and mobile devices -->
    <style type="text/css" title="Site default" media="all">
    @media screen, projection {
    /* exploit a parsing bug so @media rules are visible to MacIE5 */
    .BeNiceToMacIE5 {
    font-family: "\"}\"";
    font-family: inherit;
    }

    body {
    background-image:url(images/jdbg.png);
    }
    .wrapper {
    margin:0 auto;
    max-width:60em;
    border: thin solid #000000;
    overflow: hidden;
    width:expression(document.body.clientWidth > 900? "900px" : "auto");

    }
    /*h1 {
    background-color: #666666;
    color: #7d5500;
    margin: 0;
    padding: .2em 2%;
    }
    h2 {
    margin: .2em 0;
    }*/

    /* MAIN CONTENT */

    .content h1 {
    color: #663900;
    padding-top: 15px;
    margin-bottom: 10px;
    font: bold 1.3em Georgia, "Times New Roman", Times, serif;
    }

    .content h2 {
    font-size: 1em;
    font-weight: normal;
    border-bottom: 1px solid #106A9B;
    margin-bottom: 5px;
    color: #663900;
    }

    .content p {
    font-size: .9em;
    margin-bottom: 10px;
    }
    .content .figure {
    float: right;
    width: 178px;
    margin-bottom: 2px;
    margin-left: 5px;
    position: relative;
    }

    .content .figure p {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 168px;
    background-color: #FFF;
    border: 1px dashed #666666;
    font-size: .5em;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    margin: 0;
    }

    .content .figure img {
    display: block;
    }




    .history{
    width: 260px;
    margin: 0 10px 10px 10px;
    }
    .history img{
    border: 1px solid #666;
    background-color: #FFF;
    padding: 4px;
    position: relative;
    top: -5px;
    left:-5px;
    }

    div.float {
    float: left;
    padding-right:0px;
    padding-left:0px;
    margin-left:25%;
    margin-right:0px;

    }

    div.float1 {
    float:right;
    padding-right:0px;
    padding-left:0px;
    margin-left:0px;
    margin-right:25%;
    }

    div.spacer {
    clear: both;
    }
    * html #container{
    width:100%;
    }

    * html .sidebar {height: 1%;}

    .main {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: thin solid #000000;
    border-bottom: thin solid #000000;
    color: #000000;
    background-color:#CCCCCC;
    /* background-color value is for content background.
    Image is 2000px wide, ~25% is colored, where sidebar should be
    (exact pixel count of colored area is actually closer to 26%).
    Position corresponds to left sidebar, repeat img vertically.
    Easily modified for right sidebar - just flip the image,
    change bg position to 75% and change .content to float:left.
    */

    }

    .content {
    width:66%;
    float: right;
    margin-right: 75px;
    display:inline;
    }

    /*Banner*/
    #banner {
    position: relative;
    border: 1px solid #000000;
    border-top: none;
    border-left:none;
    border-right:none;
    background: url(images/RevolvePic1.png) no-repeat right top;
    background-color: #CCCCCC;
    }
    /* fix IE 6: improperly positioning
    'subscribe' and 'about us' links in banner */
    * html #banner {
    height: 1px;
    }

    #banner #logo {
    margin-left:15px;
    position: relative; /* jumping headerbar fix for IE */
    }


    #banner ul {
    position: absolute;
    right: 60px;
    bottom: 5px;
    }


    /* NAV BAR */
    #mainNav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background: url(images/bg_nav.png) repeat-x left top;
    float: left;
    width: 100%;
    }

    #mainNav li {
    float: left;
    padding: 0;
    margin: 0;
    }

    #mainNav li a, #mainNav li a:link {
    color: #FFFFFF;
    text-decoration: none;
    padding: .5em 1em;
    border-right: 1px solid #000000;
    display: block;
    font: bold 12px "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    }

    #mainNav li a:hover {
    background: url(images/bg_nav_h.png);
    }

    /* IE 6 hack to make entire button clickable */
    * html #mainNav a { width: 1px; }

    /* SIDE BAR*/
    .sidebar {
    float:left;
    width:22%;
    margin:0 2% 0 0;
    border-right: 1px solid #000000;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
    background-color:#FFFFFF;
    display:inline;
    }

    .sidebar h2 {
    font-size: 1em;
    margin-top:0px;
    padding: 0px 8px 0 8px;
    margin-bottom: 5px;
    border-top: 3px solid #000000;
    background: url(images/bg_side_head.png) repeat-x left bottom;
    }
    .sidebar p {
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
    color: #666666;
    font-size: .7em;
    }
    .sidebar h3 {
    font-size: .7em;
    margin-right: 5px;
    margin-left: 5px;
    color: #663900;
    margin-bottom: 3px;
    }

    .sidebar h3 a {
    color: #663900;
    }

    #sidebar a:hover {
    color: #CA1D07;
    }

    .clear {
    clear: both;
    height: 1px;
    overflow: hidden; /* prevent IE expanding the container */
    margin: 0; /* keep flush with surrounding blocks */
    }
    .footer {
    background-color: #FFFFFF; /* same bg color as h1 */
    color: #000000;
    margin: 0; /* flush with .main */
    padding: 1% 2%;
    }

    } /* end media rules */
    </style>
    <!-- protect other browsers from IE6's quirks -->
    <!--[if IE 6]><style type="text/css" title="Site default">
    h1, .sidebar {position:relative}</style><![endif]-->

    </head>
    <body>
    <div class="wrapper">
    <div id="banner"><img src="images/header_bar.png" alt="Phi Kapp Chi Home" name="logo" width="524" height="119" id="logo"/></div>

    <div id="mainNav">
    <ul class="style1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Alumni</a></li>
    <li><a href="#">Rush</a></li>
    <li><a href="#">Sing</a></li>
    <li><a href="#">Float</a></li>
    <li><a href="#">Intramurals</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">About</a></li>
    </ul>
    </div>
    <!-- end nav -->

    <div class="main">

    <div class="content">
    <h1>Welcome to the Home of Phi Kappa Chi</h1>
    <div class="figure">
    <img src="images/crest edit.png" alt="Phi Chi Crest" width="178" height="250"align="right" /> </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p>
    <h2>History of Phi Kappa Chi</h2>
    <p> On December 18, 1987 , p>
    <p>On Monday morning, p>


    <div id="container">
    <div class="spacer">
    &nbsp;
    </div>

    <div class="float">
    <img src="images/BollingerHampton.gif" width="175" height="250"
    alt="image 1" /><br />

    </div>

    <div class="float1">
    <img src="images/BollingerHampton1.gif" width="175" height="250"
    alt="image 3" /><br />

    </div>

    <div class="spacer">
    &nbsp;
    </div>

    </div>

    <h2>Phi Kappa Chi Today</h2>
    <p>Today, Phi p>
    </div> <!-- end content -->

    <div class="sidebar">
    <h2 class="style1">Phi Chi News</h2>
    <h3><a href="#"> Official Rush Starts Sunday, September 10th </a></h3>
    <p>The official fall Rush starts this Sunday at the Baylor Science Building at 2 p.m. If you have any interest in Phi Chi, show up and meet some of the guys!</p>
    <h3><a href="#"> Pictures Wanted </a></h3>
    <p>Pictures have been updated to the website, but we need more!! If you have any pictures related to Phi Chi, please email them to the webmaster!</p>
    <h3><a href="#"> Rush Schedule Announced </a></h3>
    <p>The official Rush schedule has been announced. For more specifics, please check out the Rush page.</p>
    <h3><a href="#"> Stoplight Party set for September 3rd </a></h3>
    <p>Phi Chi will host its first party on Sunday, September 3rd at The Palladium (8th and Austin). The theme is Stoplight Party, where if you are single, where green; not sure, yellow; and dating someone, red. The party will start at 10:30 after the TCU game. Bring friends!</p>
    <h3><a href="#"> Phi Chi has a New Website </a></h3>
    <p> Phi Chi has a new website. Take some time and look around. Also, current members and alumni, please log into our new member database so you can keep up with past members. Please feel free to e-mail the webmaster any problems, questions, or suggestions.</p>

    </div>
    <!-- end sidebar -->

    <!-- need a non-floating element to properly calculate container height -->
    <div class="clear"></div>
    </div> <!-- end main -->
    <p class="footer">

    </div> <!-- end wrapper -->
    </body>
    </html>
     
    sethmac, Oct 31, 2006
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. helpful sql
    Replies:
    0
    Views:
    849
    helpful sql
    May 19, 2005
  2. ittay.dror@gmail.com

    database columns vs. gui columns and sorting

    ittay.dror@gmail.com, Feb 26, 2006, in forum: Java
    Replies:
    5
    Views:
    632
    ittay.dror@gmail.com
    Mar 4, 2006
  3. henrybranson@hotmail.com

    CSS columns problem - faux columns don't work

    henrybranson@hotmail.com, Nov 21, 2005, in forum: HTML
    Replies:
    4
    Views:
    963
    henrybranson@hotmail.com
    Nov 24, 2005
  4. =?Utf-8?B?YmVub2l0?=

    Read CSV - string Columns - Int columns

    =?Utf-8?B?YmVub2l0?=, May 8, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    452
    =?Utf-8?B?YmVub2l0?=
    May 8, 2006
  5. Jacksm
    Replies:
    2
    Views:
    890
    Paul Chalekian
    Nov 21, 2006
Loading...

Share This Page