Aqua-Soft Forums

with CSS

Hi people, got a little problem that I hope you can help me with.

My website is here: http://metaforix.net/test/

I would like to know why my container (which encapsulates the sidebar) does not expand automatically to accomodate the height of the sidebar automatically. Thanks

My code is below:

For HTML:

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

<div id="container">
<h2>This is a test</h2>	


<div id="tabnav">
	<li><a href="#" class="active">gonzo</a></li>
	<li><a href="#">fozzie</a></li>
	<li><a href="#">statler</a></li>
	<li><a href="#">waldorf</a></li>

</div>
<div id="sidebar">
<h2>Sidebar</h2>
<p>For updates etc</p>	
</div>

</div>

</body>

For CSS:

body 
	{
		padding: 0;
		margin: 0;
		font: 76% lucida, tahoma, sans-serif;
		background: #e0e0e0;
		color: #303030;
	}

#container h2
	{
	  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	  font-weight: normal;
	  font-size: 32px;
	  color: #000;
	  padding: 20px;
	}

#container
	{
	  width: 750px;
	  margin: 20px auto 20px auto;
	  font-family: Verdana, Arial, Helvetica, sans-serif;
	  font-size: 12px;
	  line-height: 1.6em;
	  color: #666666;
	  background-color: #FFFFFF;
	  height: none;
margin: 0 auto 15px auto;
width: 760px;
padding: 5px 20px 20px 20px;
background: #ffffff;

	}

#tabnav
	{
		height: 20px;	
		margin: 0;
		padding-left: 10px;
		border-bottom: 1px solid;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	}

#tabnav li
	{
		margin: 0; 
		padding: 0;
		  display: inline;
		  list-style-type: none;
	  }

#tabnav a:link, #tabnav a:visited
	{
		float: left;
		background: #f3f3f3;
		font-size: 12px;
		line-height: 14px;
		font-weight: none;
		padding: 2px 10px 2px 10px;
		margin-right: 5px;
		border-top: 1px solid #000;
		border-left: 1px solid #000;
		border-right: 1px solid #000;
		text-decoration: none;
		color: #666;

	}

#tabnav a:link.active, #tabnav a:visited.active
	{
		background: #fff;
		color: #000;
	}

#tabnav a:hover
	{
		background: #fff;
	}


#sidebar 
	{
		width:140px;
		float:right;
	}

#sidebar p 
	{
		font-size: 0.9em;
		line-height: 1.3em;
		margin: 0 0 12px 0;
	}

Thanks in advance!

#369575

Yeah, that's very strange but you could always try to find the "bug" by adding a border to the different objects. That often helps to visualize what's really happening.

#369630

Add this right before the last

#369631

Yeah, if I have positioning issues, I usually just play around with cleared divs and floats...it's probably not helping me create too sophisticated an understanding of web rendering, but I think I get it well enough :P.

-NC

#369768

Thank you people, you guys rock. It works now. However, I'm stuck with the SAME problem on another design. And this time it doesn't work. I'm sorry if I sound stupid, but i have absoultely no idea why this is happening, as both sites are based on the same concepts or the sidebar floating, so to speak.

The second design is found here: http://metaforix.net/test2/

Thanks in advance. =)

#369868

You're using position:absolute on the sidebar. This won't push the height down to fit the sidebar because position:absolute essentially removes the positioned element out of the document flow.

-NC

#369931

I bow in humbleness at your highness's feet. Perchance the good sir would like me to shine his boots? It works now. Thanks for the help, nc and wizard. =)

#369938

No problem. We're all bowing to Stevie anyway (Stevie the BM, a former admin here) :P.

-NC

#370156