...

View Full Version : CSS Height Problem



theYoungSociety
11-09-2008, 04:00 PM
Website: DEMO WEBSITE LINK HERE (http://www.freewebs.com/amillz/home.htm)

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:

<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:

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.

abduraooft
11-09-2008, 04:19 PM
Validate your code and fix all errors flirts, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freewebs.com%2Famillz%2Fhome.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

theYoungSociety
11-09-2008, 05:11 PM
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.

abduraooft
11-10-2008, 06:32 AM
<!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">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum