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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Footer is overwriting content div

    SOLVED - Thanks





    Hi there,

    Im doing my head in, ive not made a 2 col layout with css for a long time, but began a new page for making an ebay shop.

    Its all working as it should apart from the footer is overwriting the main content div.

    http://www.belltent.co.uk/ebayshop/

    Can one of you uber gurus please show me the numpty where I have got it wrong.

    Thanks...

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Bell Tent Ebay Shop</title>
    
    <style>
    
    * { padding: 0; margin: 0; }
    body {
     background: #394e27;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #fff;
    }
    
    h1, h2, h3 {
     color:#f1e96d;
    }
    
    p {
     padding: 10px;
    }
    
    #wrapper { 
     margin: 0 auto;
     width: 1000px;
    }
    
    #content { 
     float: left;
     height: 350px;
     width: 750px;
     display: inline;
    }
    
    #header {
     margin: 10px 0 0 0;
     width: 1000px;
     float: left;
     text-align:center;
    }
    
    #footer {
     clear:both;
     text-align:center;
    }
    
    #navigation {
     float: left;
     width: 990px;
     height: 25px;
     padding: 10px 0 0 10px;
     text-align:center;
    }
    
    #leftcolumn { 
     width: 250px;
     float: left;
    }
    
    a.links:link, a:visited {
    	color:#fff;
    	font-size:16px;
    	text-decoration:none;
    	padding-left: 50px;
    }
    a.links:hover, a:active {
    	color:#f1e96d;
    	text-decoration:none;
    }
    a.links:hover {
    	text-decoration:underline;
    }
    
    ul {
     list-style: none inside;
    }
    
    li {
      position: relative; 
      left: -50px;
    }
    
    </style>
    
    </head>
    
    
    
    <body>
    
    	<div id="wrapper">
             <div id="header">
    		 	<img src="http://www.belltent.co.uk/images/belltent_capitals.jpg" alt="Bell Tent Logo" width="1000px" border="0"/>		 
    		 </div> <!-- Close Header Div -->
    
             <div id="navigation">
    		    <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul">  Home</a> 
                <a class="links" href="#">  Link 2</a>
                <a class="links" href="#">  Link 3</a>
                <a class="links" href="#">  Link 4</a>
                <a class="links" href="#">  Link 5</a>	 
    		 </div> <!-- Close Navigation Div -->
    
    		 <div id="leftcolumn">
                <h3> Search for an Item </h3> <br />
                <form name="search" method="get" action="http://search.stores.ebay.co.uk/search/search.dll?GetResult&">
                <input type="text" name="query" maxlength="300" >
                <input type="hidden" name="fcd" value="2">
                <input type="hidden" name="from" value="R10">
                <input type="hidden" name="sid" value="94272291">
                <input name="submit" type="submit" value="Search">
                </form>
                
                <p>
                  <h3>Store Categories</h3>
                    <ul class="">
                      <li><a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488701011">  Bell Tents  </a> </li>
                      <li><a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488702011">  Other Tents  </a> </li>
                      <li><a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488703011">  Stoves For Tents  </a> </li>
                      <li><a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488704011">  Lights For Tents  </a> </li>
                      <li><a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488705011">  Sleeping  </a> </li>
                      <li><a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488706011">  Cooking  </a> </li>
                      <li><a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488707011">  Bags & Picnicing  </a> </li>
                      <li><a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488708011">  Furnishing  </a> </li>
                      <li><a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488709011">  Cool Stuff  </a> </li>
                    </ul>  
       			</p>
    		 </div> <!-- Close Leftcolumn Div -->
    
    	  <div id="content">
    
    			<h1> Our Products </h1>
        
        		<p>Bell tents have a beautifully elegant silhouette, are quick to put up and pack down small – they were used as military kit in the 19th Century. The design is simple: natural cotton canvas drapes down from a central pole, and is held tight by guy ropes to create a distinctive old-fashioned shape outside and a wonderfully soft ambience within. They are fully waterproof, and in full sun you can roll up the sides and lounge about enjoying the breezy shade beneath. </p>
        		<p>The 4m tent easily sleeps six but it’s much more fun as a couple, luxuriating in an open-plan bedroom or party pad. The 5m tent is bigger than most British living rooms, and would make a spectacular chill-out area for a summer garden party. </p>
        
                    <p style="text-align:center;">
        		  <a class="links" href="http://cgi.ebay.co.uk/4m-Canvas-Bell-Tent-Scout-tipi-yurt-takes-inner-stove-/130481330042?pt=UK_SportsLeisure_HikingCamping_Tents_JN&hash=item1e614b177a"> <img src="http://www.belltent.co.uk/images/belltent/bell_tents/Bell_Tent_4m.png" border="0" /> </a>
                  <a class="links" href="http://thumbs3.ebaystatic.com/m/m67A0kD23crjav3d4W4StaA/140.jpg"> <img src="http://www.belltent.co.uk/images/belltent/bell_tents/Bell_Tent_4m_Deluxe.png" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488701011"> <img src="http://www.belltent.co.uk/images/belltent/bell_tents/Bell_Tent_4m_Ultimate.png" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488701011"> <img src="http://www.belltent.co.uk/images/belltent/bell_tents/Bell_Tent_5m.png" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488701011"> <img src="http://www.belltent.co.uk/images/belltent/bell_tents/Bell_Tent_5m_Deluxe.png" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488701011"> <img src="http://www.belltent.co.uk/images/belltent/bell_tents/Bell_Tent_5m_Ultimate.png" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488702011"> <img src="http://www.belltent.co.uk/images/belltent/other_tents/Other_Tents.png" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488704011"> <img src="http://www.belltent.co.uk/ebayshop/images/light_for_tents_e_b.jpg" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488703011"> <img src="http://www.belltent.co.uk/images/belltent/stoves/Stoves_4_tents.png" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488705011"> <img src="http://www.belltent.co.uk/ebayshop/images/sleeping_e_b.jpg" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488706011"> <img src="http://www.belltent.co.uk/ebayshop/images/cooking_e_b.jpg" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488707011"> <img src="http://www.belltent.co.uk/ebayshop/images/bags_picnicking_e_b.jpg" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488708011"> <img src="http://www.belltent.co.uk/ebayshop/images/furnishings_e_b.jpg" border="0" /> </a>
                  <a class="links" href="http://stores.ebay.co.uk/Bell-Tent-UK-Camping-With-Soul/_i.html?_fsub=2488709011"> <img src="http://www.belltent.co.uk/ebayshop/images/cool_stuff_e_b.jpg" border="0" /> </a>
                </p>
                
    		 </div>  <!-- Close Content Div -->
    
    
             
    </div> <!-- Close Wrapper Div -->
    
    		 <div id="footer">
    			<p>If you have any questions please dont hesitate to call us on 07830 355993. Do add us to your list of favourite sellers and come again. <br /> Thank you for your business and Happy Camping!!!</p>		
    	     </div>  <!-- Close Footer Div --> 
    
    </body>
    
    </html>
    Last edited by Out2lunch; 03-02-2011 at 12:07 PM. Reason: SOLVED

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    #header {
     margin: 10px 0 0 0;
     width: 1000px;
     /*float: left;*/
     text-align:center;
    }
    #navigation {
     /*float: left;*/
     width: 990px;
     height: 25px;
     padding: 10px 0 0 10px;
     text-align:center;
    }
    #content { 
    /* float: left;
     height: 350px;
     width: 750px;
     display: inline;*/
    margin-left:250px;
    }
    Moral of the story: Don't use floats when there's no real requirement to "float" something!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Out2lunch (03-02-2011)

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    Ahh removed 2 of the floats but left the content one as I dont want the content to flow under the left column.

    Also I notices I had a height statement for the content which diddnt help either.


    Thanks for you help.


  • #4
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    SOLVED - Footer Error

    --- Double Post --
    Last edited by Out2lunch; 03-02-2011 at 12:10 PM. Reason: Double Post


  •  

    Tags for this Thread

    Posting Permissions

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