SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot willmoss's Avatar
    Join Date
    Apr 2002
    Location
    London, England
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy floating div problem v2

    hello everyone,

    I have posted about this before and received some help on the matter, but this never cleared up my problem so I thought it would be best to start again.

    I now have the finalised homepage for a site I've been working on - http://www.iwclassifieds.co.uk/project/v3/homepage.html

    stylesheet: http://www.iwclassifieds.co.uk/proje...es/default.css

    The trouble is that I can't get the header elements to stay inside their containers. The element causing the trouble is "header-mid".

    If I float this element, then the header elements stay inside it and everything is fine in firefox, but in IE a horrible "wrapping" effect occurs. (screenshot: IE Firefox)

    So then I make the width 100% and we go round in circles (the right margin of the header on this page doesn't line up with the right margin of the column below.)

    I think this problem is the reason also why in IE the homepage listings don't wrap around each other like they do in firefox

    (screenshot: IE Firefox)

    I desparately need to get this sorted out within the next few days...

    Thank you so much for your help

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

    You need to clear the floats so that the parents boundaries will encompass the float (or float the parent as well).

    There are the same mistakes that we pointed out in the other thread where you have added a 100% width but also added padding and margins making things much too big and therefore they won't fit.

    When you have a fixed width layout don't use percentages to divide it up because they will get rounded differently and it also makes it hard to know whether you have added things up correctly. In a fixed width layout use a fixed width measurement such as pixels so that you know how wide and how much room you have got.

    When you float pairs of elements side by side and you want the second pair to completely clear the first two then you need to stick a physical clearing element in the code otherwise the floats will snag on the longest float.

    I've made some of the changes mentioned (except changing it all to pixels) to get it closer to what I think you want and I have used the clearfix technique for clearing floats without structural mark up (see the faq on floats for more info).

    I also notice that you are using localhost for your link destinations whch means you will have to physically change all these when you upload your site. use relative (or root relative) addresses instead.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title>BosClassifieds 2.0</title>
    <style>
    a {
    color: #000040; 
    }
    img {
    border: 0;
    }
    input.submit { border: 3px double #999999;
    border-top-color: #CCCCCC;
    border-left-color: #CCCCCC;
    padding: 2px;
    background-color: #FFFFFF;
    background-repeat: repeat-x;
    color: #333333;
    font-size: 75%;
    font-weight: bold;
    font-family: Verdana, Helvetica, Arial, sans-serif; }
    body {
    font-family: tahoma,verdana,arial,helvetica,sans-serif;
    font-size: 10pt;
    letter-spacing: .65pt;
    color: #000040;
    }
    #container { 
    border: 1px solid #330000;
    margin: 0 auto;
    text-align:center;
    width: 800px;
    }
     
    #header { 
    border: 1px solid #330000;
    }
    #header-top {
    text-align:center;
    margin: 10px 5px 15px 5px;
    }
    #header-top p { 
    margin: 15px 50px 10px 10px; 
    text-align:center; 
    font-weight: bold;
    float: right; 
    width:400px; 
    padding:0; }
    #header-top img { float: left; }
    .header-mid {
    border: 1px solid #330000; 
    clear:both;
    padding: 6px;
    margin: 8px 0px;
    background-color: #C0C0C0; }
    .header-mid span { 
    font-weight:bold; }
    
    .hbox-left {
    float: left;
    border: 1px solid #000033;
    margin: 0;}
    .hbox-right {
    float: right;
    border: 1px solid #000033;
    margin: 0 auto;}
    #header-bot {
    clear:both; }
    #main { 
    text-align: left;
    clear:both; 
    margin: 4px auto auto auto;
    padding: 0;
    }
    #leftcol { 
    width: 22%;
    float:left; 
    margin: auto .5% auto 0px;
    }
    #midcol { 
    width: 54%;
    float: left;
    margin: auto .5%;
    }
    
    .outlined_box { 
    padding: 3px 6px; border: 1px solid #330000;
    background: url(may-2006/iwclassifieds/bos/images/tbbg.gif) no-repeat 0% 0%; }
    .outlined_box span { 
    font-weight: bold;
    }
    .featured_box {
    line-height:5px;
    margin:20px auto 0px auto;
    padding: 10px 5px 5px 5px;}
    .featured_box_sm {
    line-height:5px;
    margin:5px auto 0px auto;
    padding: 10px 5px 0px 5px;}
    .featured_box img { 
    float: right; }
    .featured_box h1 { 
    margin: 0px; 
    padding: 0; }
    .featured_box h2{ 
    padding: 0 4px;
    font-size: 14pt;
    font-weight: normal;
    line-height:19px;}
    .featured_box h3{ 
    padding: 0 4px;
    font-size: 10pt;
    font-weight: normal;
    line-height:18px; }
    .featured_box_sm h4{ 
    padding: 0;
    margin: 6px auto auto auto;
    font-size: 10pt;
    font-weight: bold;
    line-height:0px;}
    .featured_box_sm h5{ 
    padding: 0 2px;
    margin: 16px auto;
    font-size: 10pt;
    font-weight: normal;
    line-height:0px; }
    #big_box { 
    margin: auto auto 8px auto;
    padding: 0px;
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
    word-spacing: 3px;
    line-height: 35px;
    background-color: #FF8080;
    border: 1px solid #000000;
    }
    .box_heading { 
    margin: 0; 
    color: #131696; 
    font-weight: bold; }
    #footer { 
    margin: 20px auto;
    text-align: left; 
    clear:both; 
    width:800px;
    }
    
    #footer-leftcol { 
    float:left; 
    width: 50%; 
    line-height: 8pt;
    padding: 0px;
    margin: 0px;
    }
    #footer-leftcol span { 
    font-weight: bold;
    font-size: 9px;
    text-decoration: underline;
    }
    #footer-rightcol { 
    float: right; 
     }
    .error {
    line-height: 30px;
    padding: 8px;
    border: 1px solid #000000;
    background-color: #FFE795;
    }
    
    clear {
    clear: both;
    }
    /* PROP hack */
    .prop-1 {
      height:150px;
      float:right;
      width:1px;
    }
    .clear-1 {
      clear:both;
      height:1px;
      overflow:hidden;
    }
    /* PROP hack */
    a {
    }
    #leftcol { 
    width: 75%;
    float:left; 
    margin: 0;
    padding: 0;
    }
    #rightcol { 
    width: 21.2%; 
    float:right; 
    margin: auto 0px auto .5%;
    padding: 0;
    display:inline;
    }
    
    .cat_box {
    float: left; 
    width: 260px;
    margin: 4px 8px 0px 8px;
    padding: 5px;
    display:inline
    }
    
    .prop-2 {
      height:13px;
      float:right;
      width:1px;
    }
    .clear-2 {
      clear:both;
      height:1px;
      overflow:hidden;
    }
    .cb_heading {
    float: left;
    margin: 0 0 7px 0;
     }
    .cb_heading h2 {
    margin: 0;
    float: left;
    font-size: 20px;
    font-weight: bold;
    }
    .cb_heading h3 { 
    margin: 0;
    font-size: 10px;
    font-weight: normal;
    float: left; }
     
    .cb_contents { 
    margin: 2px;
    padding: 0px;
    clear: both;
    line-height: 18px;
    }
    .cb_contents ul {
      width: 20em;
      margin: 0;
      padding: 0;
      list-style: none;
    }
     
    .cb_contents li {
      float: left;
      width: 10em;
      margin: 4px 0px;
      padding: 0;
     font-weight: bold;
    }
    #head_box {
     border: 2px solid #330000;
     padding: 0;
     margin: 0 4px 4px 4px;
     background: #E3FFE3;
    }
    #head_box img {
     float: left;
     border: 0;
     margin: 6px;
    }
    #head_box h1 {
     color: #003A80;
     font-size: 26px;
     font-weight: bold;
     float: left;
     margin: 6px;
    }
    .clearfix:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    }
    .clearfix {
    	display:inline-block;
    }
     /* mac hide \*/
    	* html .clearfix {height: 1%;}
    	  .clearfix {display: block;}
     /* End hide */
    
    </style>
    </head>
    <body>
    <div id="container" class="clearfix">
     <div id="header" class="clearfix">
      <div id="header-top"> <a href="may-2006/iwclassifieds/bos/index.php"> <img src="homepage_files/logo.gif" alt="IW Classifieds Logo" height="50" width="200"> </a>
       <p><a href="may-2006/iwclassifieds/bos/">home</a> - <a href="may-2006/iwclassifieds/bos/account.php">my account</a> - <a href="may-2006/iwclassifieds/bos/account.php?action=add">post an ad</a> - <a href="may-2006/iwclassifieds/bos/account.php?action=subscribe">subscribe</a> - <a href="may-2006/iwclassifieds/bos/account.php?action=contact">contact
    	 us</a> - <a href="may-2006/iwclassifieds/bos/admin/index.php">admin</a></p>
      </div>
      <div class="header-mid clearfix">
       <form method="get" action="http://localhost:81/may-2006/iwclass...at_display.php" onsubmit="return checksearch(this);">
    	<p class="hbox-left"><span>search:</span>
    	 <input size="20" name="q" type="text">
    	 <input class="submit" value="Go" type="submit">
    	</p>
       </form>
       <form method="get" action="http://localhost:81/may-2006/iwclass...ad_display.php">
    	<p class="hbox-right"><span>show ad #</span>
    	 <input size="6" name="ad_id" type="text">
    	 <input class="submit" value="Go" type="submit">
    	</p>
       </form>
      </div>
      <div class="header-mid clearfix">
       <p class="hbox-left"><span><a href="may-2006/iwclassifieds/bos/index.php">home</a></span></p>
       <p class="hbox-right"><span>2</span> ads / <span>31</span> categories / last <span>today </span>at<span> 02:59pm</span></p>
      </div>
     </div>
     <div id="main">
      <div id="leftcol">
       <div id="head_box" class="clearfix"> <img src="homepage_files/ic_car.gif" alt="Car" height="27" width="31">
    	<h1><a href="may-2006/iwclassifieds/bos/account.php?action=add">Sell your car on IW Classifieds!</a></h1>
       </div>
       <!-- Start categories -->
       <div id="categories">
    	<div class="cat_box">
    	 <div class="cb_heading">
    	  <h2><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=4">Motoring</a></h2>
    	  <h3>(0)</h3>
    	 </div>
    	 <div class="cb_contents">
    	  <ul>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=18">Cars</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=43">Caravans</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=45">Mopeds and Scooters</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=44">Commercial Vehicles</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=46">Motorbikes</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=41">Accessories</a></li>
    	  </ul>
    	 </div>
    	</div>
    	<div class="cat_box">
    	 <div class="cb_heading">
    	  <h2><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=3">Interiors</a></h2>
    	  <h3>(0)</h3>
    	 </div>
    	 <div class="cb_contents">
    	  <ul>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=40">House<br>
    		Clearances</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=38">Toys and<br>
    		Games</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=28">Furniture</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=27">Antiques</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=39">Gardening</a></li>
    	  </ul>
    	  <!-- Prop hack -->
    	  <div class="prop-2"></div>
    	  <div class="clear-2"></div>
    	  <!-- End prop hack -->
    	 </div>
    	</div>
    	<div class="cat_box">
    	 <div class="cb_heading">
    	  <h2><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=36">Boating</a></h2>
    	  <h3>(1)</h3>
    	 </div>
    	 <div class="cb_contents">
    	  <ul>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=51">Cruisers</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=48">Dinghies</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=49">Motorboats</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=52">Yachts</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=50">Jet Skis</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=47">Accessories</a></li>
    	  </ul>
    	 </div>
    	</div>
    	<div class="cat_box">
    	 <div class="cb_heading">
    	  <h2><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=2">Electrical</a></h2>
    	  <h3>(0)</h3>
    	 </div>
    	 <div class="cb_contents">
    	  <ul>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=34">Fridges and freezers</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=32">Cookers</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=33">Computers</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=37">Misc</a></li>
    	  </ul>
    	 </div>
    	</div>
    	<div class="clear-2"></div>
    	<div class="cat_box">
    	 <div class="cb_heading">
    	  <h2><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=1">Entertainment</a></h2>
    	  <h3>(0)</h3>
    	 </div>
    	 <div class="cb_contents">
    	  <ul>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=31">Gaming</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=30">TVs</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=29">Hi-Fi</a></li>
    	   <li><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=35">Music</a></li>
    	  </ul>
    	 </div>
    	</div>
    	<div class="cat_box">
    	 <div class="cb_heading">
    	  <h2><a href="may-2006/iwclassifieds/bos/cat_display.php?cat_id=9">Freebies - 40 and under</a></h2>
    	  <h3>(1)</h3>
    	 </div>
    	 <div class="cb_contents"> </div>
    	</div>
    	<!-- End categories DIV -->
       </div>
       <!-- End left column DIV -->
      </div>
      <div id="rightcol">
       <div id="big_box">
    	<p><a href="may-2006/iwclassifieds/bos/account.php?action=add">post<br>
    	 an ad</a></p>
       </div>
       <div class="outlined_box">
    	<p class="box_heading">latest...</p>
    	<div class="featured_box_sm">
    	 <h4><a href="may-2006/iwclassifieds/bos/ad_display.php?ad_id=12">rib for sale ..</a></h4>
    	 <h5><a href="may-2006/iwclassifieds/bos/ad_display.php?ad_id=12">1,200</a></h5>
    	</div>
    	<div class="featured_box_sm">
    	 <h4><a href="may-2006/iwclassifieds/bos/ad_display.php?ad_id=11">A joke ad ..</a></h4>
    	 <h5><a href="may-2006/iwclassifieds/bos/ad_display.php?ad_id=11">10</a></h5>
    	</div>
       </div>
      </div>
      <!-- End main -->
     </div>
    </div>
    <div id="footer">
     <div id="footer-leftcol">
      <p> <a href="may-2006/iwclassifieds/bos/pg_display.php?pg=about">about us</a> - <a href="may-2006/iwclassifieds/bos/pg_display.php?pg=contact">contact us</a> - <a href="may-2006/iwclassifieds/bos/pg_display.php?pg=about">terms and conditions</a> - <a href="may-2006/iwclassifieds/bos/pg_display.php?pg=about">privacy</a> </p>
      <p><span> copyright iwclassifieds.co.uk 2006, all rights reserved</span></p>
     </div>
     <div id="footer-rightcol">
      <p> <a href="http://validator.w3.org/check?uri=referer"> <img src="homepage_files/valid-xhtml11.gif" alt="Valid XHTML 1.1" height="31" width="88"> </a> <a href="http://www.paypal.com/"> <img src="homepage_files/paypal.gif" alt="We use PayPal for secure online payments" height="31" width="62"> </a> </p>
     </div>
    </div>
    </body>
    </html>
    I haven't attempted to fix any html errors but just to get the layout looking better although I wasn't sure how it was supposed to look anyway


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
  •