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
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS Height Problem

    Website: DEMO WEBSITE LINK HERE

    Problem: Well the main problem is that when I try to create the height as 100% so that it takes up the space provided and if needed it can accumulate space it needs for the content. But the background which is #FFFFFF(not an image) is not catching up to the text. View the web page to understand exactly what I am talking about.

    HTML:
    Code:
    <link rel="stylesheet" href="main.css" />
    
    
    <body>
          <div id="top-bar"> 
          <div class="bar-content">
    
    <img src="http://mail.google.com/mail/images/2/5/logo.png">
    </div> 
          </div> 
    
    <div id="container">
    <div id="left">
    <center>
    <img src="http://www.estatela.com/store/templates/estate/images/EstateTextLogo.gif">
    <br><br>
    
    <h4>
        * 5 Panel Camper Hats<br>
        * Snap Backs<br>
        * Fitted Hats<br>
        * Collaborations<br>
        * Heritage Collection<br>
    </h4>
    
    <img src="http://www.estatela.com/store/templates/estate/images/EstateShieldLogo.gif">
    <br>
    1821 Lincoln Blvd<br>
    Venice, CA 90291<br>
    310/574-3752<br>
    </center>
    </div>
    <div id="right">
    <img src="http://www.freewebs.com/amillz/img/header.jpg" width="600">
    <div id="xls_product_grid">
    	
    <a href="?c=root&product=030823"><img class="product_photo" src="http://www.estatela.com/store/photos/1043.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030822"><img class="product_photo" src="http://www.estatela.com/store/photos/1047.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030823"><img class="product_photo" src="http://www.estatela.com/store/photos/1043.jpeg" width="180" height="120"></a>	
    
    <a href="?c=root&product=030822"><img class="product_photo" src="http://www.estatela.com/store/photos/1047.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030823"><img class="product_photo" src="http://www.estatela.com/store/photos/1043.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030822"><img class="product_photo" src="http://www.estatela.com/store/photos/1047.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030823"><img class="product_photo" src="http://www.estatela.com/store/photos/1043.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030822"><img class="product_photo" src="http://www.estatela.com/store/photos/1047.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030823"><img class="product_photo" src="http://www.estatela.com/store/photos/1043.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030822"><img class="product_photo" src="http://www.estatela.com/store/photos/1047.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030823"><img class="product_photo" src="http://www.estatela.com/store/photos/1043.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030822"><img class="product_photo" src="http://www.estatela.com/store/photos/1047.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030823"><img class="product_photo" src="http://www.estatela.com/store/photos/1043.jpeg" width="180" height="120"></a>	
    <a href="?c=root&product=030822"><img class="product_photo" src="http://www.estatela.com/store/photos/1047.jpeg" width="180" height="120"></a>	
    
    </div>
    </div>
    </div>
    <!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-44naSaXtNJt26";quantserve();</script>
    CSS:
    Code:
    body
    {
    background: #d1d2d4; 
    min-width:800px;
    margin:auto;
    }
    
    #container
    {
    background: #FFFFFF;
    margin:0 auto;
    width: 800px;
    height: 800px; 
    }
    
    #left
    {
    background: #FFFFFF;
    margin:0 auto;
    width: 200px;
    float:left;
    h4 {color: #00ff00}
    height: 100%; 
    }
    
    
    #right
    {
    background: #FFFFFF;
    margin:0 auto;
    width: 600px;
    float:right;
    height: 100%; 
    }
    
    #top-bar{
    position:fixed;
    top:0px;
    height:35px;
    margin-left:-9px;
    background-repeat:repeat;
    background-color:transparent;
    
    }
    
    .bar-content{
    margin-left:8px;
    margin-top:9px;
    font: bold 11px Arial, Helvetica, sans-serif;
    }
    
    img.product_photo {
    	margin:2px auto;
    	padding:0px;
    	background-color:#888;
    	border:1px solid #333;
    	vertical-align:middle;
    }
    Background Info: I am currently trying to learn how to do css/html so please bare with me. I did all of the work that is up there myself, I just started experimenting, I always understood it but never made anything of it.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Validate your code and fix all errors flirts, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Done.

    Thank You! I edited all of my errors and everything is now corrected. Thank you once again, but can you tell me the problem now.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    This is an incomplete DOCTYPE. Have a look at www.alistapart.com/stories/doctype/

    I'd recommend you to change it to
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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