...

View Full Version : Problem with expandable Div tag



Zeke2
10-30-2010, 07:24 PM
(solved) - added min-height: to the container div and content div. Allowed both to start off at the min height and extend past it.


Hi there. I was wondering if anyone can give me some advice or help me understand how to make this coding work.

I have a left nav section, a content section and a right nav section all aligned at the top. Behind that I have the containing div tag for all those elements.

What I want is the background div to expand, but this will only happen if there is content in the content section.

Is there a way to make the content section a certain height, but also have it expand? Im having a bit of trouble understanding this concept, because if you set the element to a specific site, how can you make it flexible with overflow?

Here's my code incase anyones curious.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
background-color:#000000;
}


div.container {

width:800px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:white;
}

div.banner {
width:600px;
height:30px;
margin: 0 auto;
background-color:green;
margin-bottom:10px;

border:1px solid green;
}

div.leftnav {
width:100px;
margin-right:10px;
float:left;

border:1px solid red;
}


div.content {
border:1px solid red;
overflow:auto;

}


div.rightnav {
width:100px;
float:right;
border:1px solid red;
margin-left:10px;
}
</style>

</head>
<body>

<div class="container">


<div class="banner">

</div>


<div class="leftnav">

<ul><li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>

</div>

<div class="rightnav">
Test Text
</div>
<div class="content">
<ul><li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>



</body>
</html>



Thanks for reading :)

DrDOS
10-30-2010, 08:51 PM
There's quite a simple way to do this, if it fits into your page scheme. You make a tall skinny div the minimum height of your page and float it all the way right or left, or place it where convenient.

Zeke2
10-31-2010, 12:14 PM
Went through a little bit of stuff but it works with just the min-height set for the container and the content section. In my case I didn't need the extra float tag added into the content section or another expandable div to be added. Thanks for the solution :) Here's my code incase anyones interested.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
background-color:black;
}


div.container {
width:800px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:white;
min-height:600px;
}


div.banner {
width:600px;
height:30px;
margin: 0 auto;
background-color:green;
margin-bottom:10px;
border:1px solid green;
}


div.leftnav {
width:100px;
margin-right:10px;
float:left;
border:1px solid red;
}


div.content {
border:1px solid red;
overflow:auto;
min-height:600px;
}


div.rightnav {
width:100px;
float:right;
border:1px solid red;
margin-left:10px;
}


</style>

</head>
<body>

<div class="container">


<div class="banner">

</div>


<div class="leftnav">

<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>

</div>

<div class="rightnav">
Test Text
</div>
<div class="content">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul> </div>
</div>



</body>
</html>

DrDOS
11-01-2010, 03:48 PM
I'm aware of the min-height and min-width attributes but they aren't supported in all browsers, i.e. IE 6.

Zeke2
11-01-2010, 05:31 PM
I'm aware of the min-height and min-width attributes but they aren't supported in all browsers, i.e. IE 6.

damn.

Ok so instead of setting a min height for content/container div, I should create a seperate skinny float with a
height:Xpx which will cause the container div to expand to the skinny divs height.

So I suppose for the content div I should use the same principle but in this case create a tall skinny float inside the content div?

abduraooft
11-01-2010, 05:44 PM
Try
html,body{
height:100%;
}
div.container {
width:800px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:white;
min-height:100%;
height:auto !important; /* for IE6*/
height:100%;
}
div.content {
border:1px solid red;
overflow:auto;
/*min-height:600px;*/
}


Or take a look at afaux column layout (http://www.alistapart.com/articles/fauxcolumns/), at http://bonrouge.com/3c-hf-fixed.php

Zeke2
11-01-2010, 08:58 PM
Try
html,body{
height:100%;
}
div.container {
width:800px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:white;
min-height:100%;
height:auto !important; /* for IE6*/
height:100%;
}
div.content {
border:1px solid red;
overflow:auto;
/*min-height:600px;*/
}


Or take a look at afaux column layout (http://www.alistapart.com/articles/fauxcolumns/), at http://bonrouge.com/3c-hf-fixed.php

Oh nice, so there still is a command for IE6, it's just with different expression.

so height:auto;height:100% = min-height:100%?

Ill check those links out :) Thanks for the info

abduraooft
11-02-2010, 08:21 AM
so height:auto;height:100% = min-height:100%?
Not really. All browsers except IE6 recognise min-height. Fortunately, IE6 considers height as the same as that of min-height in other browsers. The !important keywords tells all the browsers (except IE6) to take auto as final value and don't override it with any subsequent changes. Thus the last line height:100% is targeted for IE6 only.

Zeke2
11-06-2010, 11:15 PM
Cheers for the info.

Im having some trouble though with implimenting a repeating background.
Basically I have a float on the left of a standard div. I want the float to expand vertically with the repeating gradient to the height of browser.
Im not sure what I'm doing wrong.




float:left;
background-image:url('images/gradient.jpg');
background-repeat:repeat-y;
width:129px;
min-height:937px;
height:auto !important;
height:100%;
position:relative;
left:-5px;
top:-9px;

abduraooft
11-07-2010, 12:23 PM
Can we have a link to your page?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum