Hey guys,
I’ve tried many different methods, but I just can’t seem to get it right. I’ve been trying to get my container to expand so it fits the content inside, but either the content just overflows, or I get a scrollbar. Below is my css and html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NYU Hong Student Association</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="slider.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
</div>
<ul id="navigation">
<li id="navigation-1"><a href="index.html" title="Home" ><span>Home</span></a></li>
<li id="navigation-2"><a href="events.html" title="Events" ><span>Events</span></a></li>
<li id="navigation-3"><a href="media.html" title="Media"><span>Media</span></a></li>
<li id="navigation-4"><a href="e-board.html" title="E-board" class="current"><span>E-Board</span></a></li>
<li id="navigation-5"><a href="about.html" title="About"><span>About</span></a></li>
</ul>
</div>
<div id="contentBg">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div id="events_block">
<table border="0px">
<tr><td><img src="../hk/images/blah.jpg" alt="." width="175px" height="225px" /></td><td><b>Decorations Chair</b></br>Blah1</br></br>Year: </br>School: </br></br> "I love "</td></tr>
<tr><td colspan="2"></td></tr><tr><td colspan="2"></td></tr><tr><td colspan="2"></td></tr>
<tr><td><img src="../hk/images/blah2.jpg" alt="." width="175px" height="200px" /></td><td><b> Representative</b></br>Blah2</br></br>Year: </br>School: </br></br>"I am a
</td></tr></table>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
</html>
CSS:
@CHARSET "UTF-8";
/* CSS Document */
body{
font-family:century gothic;
margin:0px; padding: 0px;
background-color: #4b4b4b;
behavior:url(csshover.htc);
}
#main{
}
#footer{
}
#logo{
background-image: url(http://www.nyu.edu/clubs/hksa/images/Logo.png);
background-repeat: no-repeat;
width: 426px;
height: 80px;
left: 5px;
top: 0px;
position: relative;
float: left;
margin-top: 10px;
}
#contentBg{
background-repeat:no-repeat;
}
.image_block{
float: left;
height: 200px;
width: 500px;
}
#text_block{
width: 260px;
height: 205px;
float: left;
position: absolute;
left: 45px;
bottom: 60px;
z-index: 2;
}
#contentbox2_text{
width: 260px;
height: 205px;
float: left;
position: absolute;
left: 350px;
bottom: 60px;
z-index: 2;
}
#contentbox1{
width: 289px;
height: 205px;
background: url(http://www.nyu.edu/clubs/hksa/images/contentbox1.png);
background-repeat: none;
position: absolute;
bottom: 60px;
left: 24px;
}
#contentbox2{
width: 289px;
height: 205px;
background: url(http://www.nyu.edu/clubs/hksa/images/contentbox2.png);
background-repeat: none;
position: absolute;
bottom: 60px;
left: 338px;
}
#facebooklogo{
width: 227px;
height: 57px;
background: url(http://www.nyu.edu/clubs/hksa/images/facebooklogo.png);
background-repeat: none;
position: absolute;
bottom: 190px;
right: 85px;
text-indent: -9999px;
}
#tumblrlogo{
width: 227px;
height: 57px;
background: url(http://www.nyu.edu/clubs/hksa/images/tumblrlogo.png);
background-repeat: none;
position: absolute;
bottom: 130px;
right: 85px;
text-indent: -9999px;
}
.container{
width: 960px;
margin: 0 auto;
background-color: white;
overflow: hidden;
position: relative;
}
#main .container{
background-color: white;
border: 1px solid black;
min-height: 650px;
}
.clear {font-size: 1px; height: 1px}
.clearfix:after {content:"."; display:block; height:0;
clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/*Events*/
#events_block{
width: 700px;
border: 1px solid black;
position: absolute;
margin-top: 120px;
margin-left: 135px;
}
/* HEADEERRRRR*/
#header{
}
/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/
ul#nav {
list-style: none;
padding: 0;
margin: 0;
}
ul#nav li a {
display: block;
font-weight: bold;
padding: 0;
background:#f9f9f9;
list-style: none;
text-decoration: none;
}
ul#nav li a:hover{
background:#888;
color:#fff;
}
ul#nav li {
float: left;
position: relative;
width: 100px;
text-align: center;
margin-right:0px;
border:1px solid #ccc;
border-style: none none none none;
list-style: none;
}
ul#nav li.current a{
background:#ddd;
}
ul#nav li.current a:hover{
background:#888;
}
li ul {
display: none;
position: absolute;
width:100px;
top: 0;
left: 0;
font-weight: normal;
padding: 0;
margin-left:0px;
}
ul#nav li ul.sub li{
border-width:0 1px 1px 1px!important;
}
ul#nav li ul.sub li a{
font-weight: normal!important;
}
li>ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}
/*<----- Sliderrr CSSSS---->*/
#slider {
background-color:#3a3a3a;
position:absolute ;
padding:0px;
overflow:hidden;
border: 0px solid black;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
left: 24px;
top: 100px;
}
.content {
width:908px;
float: left;
position: relative;
background-color:#FFF;
}
.inslider a {
text-decoration:none;
}
.contentholder {
border: 1px solid #a9a9a9;
height:225px;
width: 908px;
overflow: hidden;
position: relative;
background-color:#FFF;
}
.contentslider {
position: absolute;
top: 0px; left:0px;
}
.contentnav {
position: absolute;
bottom: 1px; right:1px;
height:30px;
z-index: 100;
text-align: center;
line-height: 30px;
background-color: #fff;
opacity: 0.8;
filter:alpha(opacity=80);
}
.contentnav a {
padding: 7px;
text-decoration: none;
color: #333;
}
.contentnav a.active {
font-weight: bold;
color:#FFF;
background: #603;
}
Thanks for your help!!
