SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Windsor, Berkshire
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    second column in ie drops down regardless of size!

    hey all,
    I've got a page design with all the code below set out. For some reason, regardless of the second columns size, be it 30 pixels less than needed to fit or whatever, still seems to drop below the primary content column... muchly confusing as you may well understand, I've checked everything I can think of, apart from maybe moving the code about somewhat! anyt ideas? thanx in advance!!

    Code CSS:
    /* CSS Document */
     
    * {
     margin: 0;
     padding: 0;
    }
    .top {
    	font-size: 11px;
    	color: #CCCCCC;
    }
    body {
    	text-align: center;
    	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 18px;
    	background-attachment: fixed;
    	background-color: #009CE8;
    	background-image: url(images/bg.gif);
    	background-repeat: repeat-x;
    }
    a:link, a:visited {
     color: #006699;
    }
    a:hover {
    	color: #FFFFFF;
    	background-color: #006699;
    }
     
    h1 {
    	margin-bottom: 11px;
    	margin-left: -108px;
    	padding: 15px 0 21px 108px;
    	color: #006699;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 1.5em;
    	font-style: normal;
    	line-height: 1px;
    	font-weight: bold;
    	font-variant: normal;
    	text-transform: capitalize;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #999999;
    }
    h2, h3{
     font-weight: normal;
     font-size: 1em;
     line-height: 18px;
    }
    h2 {
    	padding-top: 10px;
    	padding-bottom: 20px;
    	font-size: 1.25em;
    	text-transform: capitalize;
    	color: #99CC00;
    	font-weight: bold;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	line-height: 1px;
    }
    h3 {
    	padding-bottom: 6px;
    	font-weight: bold;
    	color: #006699;
    	line-height: 0.5em;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #003D59;
    } 
     
    #page {
    	margin: 0 auto;
    	width: 763px;
    	text-align: left;
    	background: #fff url(images/pagebg.gif);
    	border-right-width: 4px;
    	border-left-width: 4px;
    	border-right-style: solid;
    	border-left-style: solid;
    	border-right-color: #006699;
    	border-left-color: #006699;
    }
    #header {
    	height: 140px;
    	background-image:url(images/copllage1.jpg);
    	background-color: #0069B7;
    	border-bottom-width: 4px;
    	border-bottom-style: solid;
    	border-bottom-color: #99CC00;
    }
     
    #header p {
     
     float: left;
     padding: 24px 24px 24px 24px;
     font-size: 1.5em;
     line-height: 1em;
     color: #000000;
    }
     
    #header ul {
     padding-top: 114px;
     padding-right: 12px;
     text-align: right;
     list-style: none;
    }
    #header li {
     display: inline;
     margin: 0 8px;
    }
    #header li a {
    	padding: 6px 9px 6px 9px;
    	font-size: 11px;
    	line-height: 1em;
    	text-decoration: none;
    	color: #ffffff;
    	background-color:#0B119B;
    	border: 2px solid #FFFFFF;
    	font-weight:bold;
    }
    #header li a:hover {
     color: #0B119B; 
     border: 2px solid #0B119B;
     background-color:#ffffff;
     }
     
     
    #content-primary {
     margin: 12px 24px 60px 24px;
     width: 460px; 
     float: right;
    }
     
    #content-primary ul {
     padding-bottom: 18px;
     padding-left: 50px;
    }
     
    #content-primary p {
     padding-bottom: 18px;
     padding-left: 50px;
    }
    #content-primary img {
     float: left;
     padding: 3px;
     border: 3px solid #eee;
     background: #fff;
     margin: -6px 18px 0 -114px; 
    } 
    #content-primary ul {
     
     list-style-image:url(images/bullet_.gif);
     }
     
    #content-secondary {
     float: right;
    margin: 24px 24px 60px 24px; 
     width: 200px;
     font-size: 11px;
     color: #300;
    }
    #content-secondary p {
     padding-bottom: 18px;
    }
    #footer {
    	clear: right;
    	height: 150px;
    	font-size: 10px;
    	line-height: 1em;
    	color: #fff;
    		background-color: #003866;
    		background-image:url(images/footer.jpg)
    }
    #footer a:link, #footer a:visited {
     color: #c99;
    }     
     
    #footer p {
     padding: 72px 24px 24px 24px;
    } 
    #footer ul {
     margin: 0;
     padding: 0;
    }
    #footer li {
     display: inline;
    }
     
    .clear {
     clear: both;
    }
     
    .container {
    padding: 10px 10px 10px 10px;
    	background-color: #ECF9FF;
    	border: 2px solid #006699;
    	margin-bottom: 10px;
    }
    .container ul {
    padding-left:20px;
     list-style-image:url(images/bullet_.gif);
     }
     
    .date {
    	color: #FF9900;
    	font-weight: lighter;
    	font-size: 11px;
    }
     
    .roundtop { 
    	background: url(images/t2.gif) no-repeat top right; 
    }
     
    .roundbottom {
    	background: url(images/b2.gif) no-repeat top right; 
    }
     
    img.corner {
       width: 15px;
       height: 15px;
       border: none;
       display: block;
    }

    and the HTML

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="page">
      <div id="header">
      <ul>
          <li class="selected"><a href="index.html">Home</a></li>
          <li> <a href="about.html">About us</a></li>
          <li> <a href="services.html">Services</a></li>
          <li> <a href="products.html">Products</a></li>
          <li> <a href="faq.html">FAQ</a></li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li><a href="recruitment.html">Recruitment</a></li>
          <li> <a href="contact.html">Contact us</a></li>
        </ul>
      
      </div>
      
      <div id="content-primary">
        <h1>Products</h1>
        <p>&nbsp;</p>
      </div>
      <div id="content-secondary"> 
        <div class="container">
          <h3>Featured Product </h3>
          <p>&nbsp;</p>
        </div>
        <div class="container">
          <h3>Featured Product </h3>
          <p>&nbsp;</p>
        </div>
        <div class="container">
          <h3>Special Offers </h3>
          <p>&nbsp;</p>
        </div>
        <p>&nbsp;</p>
      </div>
      <div id="footer">
        <p>&copy; 2007 Helping Hands DCS Ltd. All rights reserved</p>
    </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think its because you have both of the columns set to float right....set one to float: left; and the other one to float: left; depending on which one you want left or right.

    Code:
    #content-primary {
     margin: 12px 24px 60px 24px;
     width: 460px;
     float: right;
    } 
    
    #content-secondary {
     float: left;
    margin: 24px 24px 60px 24px;
     width: 200px;
     font-size: 11px;
     color: #300;
    }

  3. #3
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dont forget to add display: inline; to them to fix Explorer's double margin bug on floats....

  4. #4
    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)
    Hii,

    As faliol said it's the double margin bug on the size of a float that touches the containers edge that is causing the problem. The display:inline fix will cure it (see the faq on floats for more info).

    Code:
    #content-primary {
     margin: 12px 24px 60px 24px;
     width: 460px;
     float: right;
        display:inline;
    }


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
  •