SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container won't expand as more content is added and overflowing from box

    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:


    Code HTML4Strict:
    <!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:

    Code 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([url]http://www.nyu.edu/clubs/hksa/images/Logo.png);[/url]
    	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([url]http://www.nyu.edu/clubs/hksa/images/contentbox1.png);[/url]
    	background-repeat:  none;
    	position:  absolute;
    	bottom:  60px;
    	left:  24px;
    }
    #contentbox2{
    	width:  289px;
    	height:  205px;
    	background:  url([url]http://www.nyu.edu/clubs/hksa/images/contentbox2.png);[/url]
    	background-repeat:  none;
    	position:  absolute;
    	bottom:  60px;
    	left:  338px;
     
    }
    #facebooklogo{
    	width:  227px;
    	height:  57px;
    	background:  url([url]http://www.nyu.edu/clubs/hksa/images/facebooklogo.png);[/url]
    	background-repeat:  none;
    	position:  absolute;
    	bottom:  190px;
    	right:  85px;
    	text-indent:  -9999px;
    }
    #tumblrlogo{
    	width:  227px;
    	height:  57px;
    	background:  url([url]http://www.nyu.edu/clubs/hksa/images/tumblrlogo.png);[/url]
    	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!!

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It has to do with position:absolute on #events_block, which is causing that div to be removed from the flow of the markup content, so that if it expands, it does not affect the container to expand like you want. Remove that and the container should expand.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply! But I removed position: abosolute from the #event_block but the content inside just overflows over and out of the container. Is there a way to keep it inside the container and have the container expand to fit the content?

  4. #4
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you repost your code with the changes? For me, removing the absolute positioning worked.

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh just kidding sdt76. It works, I just had to clear my cache! Thanks for all your help! I'm still a css noob =[

  6. #6
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem

    Just a friendly piece of advice though, I would look into a CSS solution for your table. You could accomplish your layout with a list. Just something to consider.


Bookmarks

Posting Permissions

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