...

View Full Version : div height 100% with the content



5pteron
11-08-2008, 09:44 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html,body { height: 100%; }
#wrapper {
width: 790px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
height: 100%;
}
#sidebar {
float: right;
width: 160px;
background-color: #00FF33;
min-height: 100%;
position: relative;
}
* html #sidebar { /* this is needed to fake min-height in IE 6 */
height:100%;
}
#content {
width: 630px;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="content">
<p>Content for id "content" Goes Here</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>&nbsp;</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>&nbsp;</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>&nbsp;</p>
<p>d</p>
<p>&nbsp;</p>
</div>
</div>
</body>
</html>


I want to make the height of the sidebar extend as the content gets long. Now, the sidebar div will just only make its height the browser-window height. How can I make it extend to where the content ends?

abduraooft
11-08-2008, 10:20 AM
Adopt a faux column approach (http://www.alistapart.com/articles/fauxcolumns/).

prathima
02-28-2009, 10:51 AM
Hi
I'm facing problem with divs. I have a main div and with in this div I have some other divs.
The problem is I'm unable to fix the height of inner div.
Actually the inner div should take the height according to the content with in it.
But in my case the div height is exceeding the content height.

You can find the actual page here:
http://www.ranganpalke.com/testpage.htm

The problematic div is with yellow background color.
The problem exists with IE7 and FireFox (IE6 shows as expected)

Thank you very much

abduraooft
02-28-2009, 11:02 AM
Try removing the float:left; from

<div style="border: 1px solid red; padding-left: 20px; width: 550px;float: left;">
<span class="questionbold">
Which country is the Bermuda part of? Which country is the Bermuda part of?

</span>
<br/>
<span style="padding-left: 26px;">- 3months ago, Resolved question</span>
</div> and then remove

<div style="clear: left;"></div> altogether.

PS: Avoid CSS Inline Styles (http://webdesign.about.com/od/css/a/aa073106.htm)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum