PDA

View Full Version : CSS Height



Decker
Sep 15th, 2010, 08:37 PM
Ok, I have my website almost done. One problem, when I erase the height from the content so that it will AUTO adjust (I'm sure you know what I mean), it totally deletes the content. But that's not what it does on my other site, it works on my other site. I don't have a link to the site cause the web host ain't working right now. Here is the codes:

CSS:

body {
background-color:#000000;
font-family:"Arial";
font-size:100%;
}

#container {
width: 950px;
margin:10px auto 0;
}

a:link { color: black; text-decoration: none; }
a:visited { color: black; text-decoration: none; }
a:hover { color: #ff7900; text-decoration: none; }

#header {
background-image:url(images/head.jpg);
width:950px;
height:150px;
border-style:solid;
border-color:#7d7d7d;
}

#content {
background-image:url(images/content.jpg);
width:950px;
height: 500px;
border-style:solid;
border-color:#7d7d7d;
}

#left {
float:left;
width:200px;
padding:10px;
}

#center {
float:left;
width:490px;
padding:10px;
}

#right {
float:left;
width:200px;
padding:10px;
}

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">

<div id="header"> </div>

<div id="content">

<div id="left">
<!--Navigation-->
<table>
<tr>
<td background="images/bar.jpg" width="195" height="30">
<center><font color="#fffc00">Navigation</font></center>
</td>
</tr>
</table>
<center>
<font size="4">
<div style="padding: 1px;"><a href="#">Home</a></div>
<div style="padding: 8px;"><a href="#">Register</a></div>
<div style="padding: 1px;"><a href="#">Downloads</a></div>
<div style="padding: 8px;"><a href="#">Vote</a></div>
<a href="#">Contact</a>
<!---->
<br />
<br />
<!--Staff-->
<table>
<tr>
<td background="images/bar.jpg" width="195" height="30">
<center><font color="#fffc00">Staff</font></center>
</td>
</tr>
</table>
<center>
<font size="4">
Decker
</font>
</center>
<!---->
</div>

<div id="center">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>

<div id="right">
<!--Server Status-->
<table>
<tr>
<td background="images/bar.jpg" width="195" height="30">
<center><font color="#fffc00">Server Status</font></center>
</td>
</tr>
</table>
<center>
<font size="4">
Server Status: Offline
<br />
Total Account: 0
<br />
Total Characters: 0
<br />
Players Online: 0
<!---->
<br />
<br />
<!--Partners-->
<table>
<tr>
<td background="images/bar.jpg" width="195" height="30">
<center><font color="#fffc00">Server Status</font></center>
</td>
</tr>
</table>
<center>
<font size="6">
<a href="http://www.elitepvpers.de">Elitepvpers</a>
<a href="http://www.4botters.com">4Botters</a>
</font>
</center>
<!---->
</div>

</div>

</div>

</body>
</html>

Pepineros
Sep 16th, 2010, 12:55 AM
...when I erase the height from the content so that it will AUTO adjust (I'm sure you know what I mean), it totally deletes the content.

You could try using max-height instead of height. For example, if you set max-height:500px;, the box will accommodate to whatever is in it until it reaches 500px, and then overflow. A box with a max-height of 500px and 300px worth of content is 300px high.
Even if the height attr is deleted, it should never mean height:0;. So I'm guessing there's another problem with your code, but I can't put my finger on it. (Except for an empty 'center' tag in the 22nd line of the html, but that shouldn't cause a problem like this, should it?)