I have the following layout:
<div id="header">
Header code
</div>
<div id="containter">
<div id="left">
Left column code
</div>
<div id="right">
Right column code
</div>
</div>
<div id="footer">
Footer code
</div>
I am trying to make both of the divs in the container div a minimum of 500px high, but if the content of either the left or right div is greater than 500px, then I want them both to stretch to the size which will accomodate the content that is greater than 500px. In effect, I only want a horizontal scroll bar to appear in either one of those divs, if necessary, and not a vertical one. Can this be done?
I need this to work in both NN and IE.
I am using the following CSS:
#header {
width: 100%;
padding: 5px;
margin-bottom: 5px;
background-color: #CCCCCC;
}
#container {
width: 100%;
}
#left {
width : 30%;
min-width: 250px;
height: 95%;
height: 500px;
float : left;
background : #EEEEEE;
padding: 5px;
overflow: auto;
border: 2px solid #999999;
}
#right {
width : 67%;
height: 95%;
height: 500px;
float : right;
background : transparent;
padding: 5px;
overflow: auto;
border: 2px solid #999999;
}
#footer {
width: 100%;
clear: both;
margin-top: 5px;
padding-left: 5px;
padding-top: 10px;
}
Thanks in advance for your help.Well, I think I can help you a little bit here. For one, IE will not display a div inside of a div. Sorry. In order to do something like that you have to embed the tag into the body of your HTML document. In theory, what you're trying to do SHOULD work, but most likey won't.
Another suggestion would be to just use a table or P STYLE border around your info. (Sorry if I didn't help you much, I'm not very partial to scrole bars when aligning info in the middle of the page.)Originally posted by razor2341
For one, IE will not display a div inside of a div.
what?!?!?
this is like the basis for all css based layouts. Nested div's are totaly legit.
Originally posted by razor2341
Another suggestion would be to just use a table
Don't use tables for non tabular data (ie. layout)
To the original poster, you will want to use the max-height attribute, and implement owens hack for IE users (see PeOfEo's second post on this (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=28440&perpage=15&pagenumber=3">http://forums.webdeveloper.com/showthre ... genumber=3</a><!-- m -->) page)samij586, thanks for the link. However, I am a little confused as to what div this code should be used on. Looking at my code example, I would think it would need to be applied to each of my left and right divs. If that is done, would I need to do anything to my container div?Use this CSS at the top of your page
<style>
#left, #right {overflow-y:scroll}
</style>I get the expected results in NN for my right div, but my left div does not resize to match that of my right div. In IE, it only stays at one size, and shows a scroll bar when the content exceeds that size.
I need a cross-browser (mainly IE and NN) solution that will make both the left and right divs resize to the exact same size when the content of either exceeds the minimum height.
Can anyone help with this? The earlier suggestion seemed to help with NN, but not IE. I have seen some other sites that do what I am trying to do, but they have been 3 columns, and not 2. Any help on this subject is greatly appreciated.
<div id="header">
Header code
</div>
<div id="containter">
<div id="left">
Left column code
</div>
<div id="right">
Right column code
</div>
</div>
<div id="footer">
Footer code
</div>
I am trying to make both of the divs in the container div a minimum of 500px high, but if the content of either the left or right div is greater than 500px, then I want them both to stretch to the size which will accomodate the content that is greater than 500px. In effect, I only want a horizontal scroll bar to appear in either one of those divs, if necessary, and not a vertical one. Can this be done?
I need this to work in both NN and IE.
I am using the following CSS:
#header {
width: 100%;
padding: 5px;
margin-bottom: 5px;
background-color: #CCCCCC;
}
#container {
width: 100%;
}
#left {
width : 30%;
min-width: 250px;
height: 95%;
height: 500px;
float : left;
background : #EEEEEE;
padding: 5px;
overflow: auto;
border: 2px solid #999999;
}
#right {
width : 67%;
height: 95%;
height: 500px;
float : right;
background : transparent;
padding: 5px;
overflow: auto;
border: 2px solid #999999;
}
#footer {
width: 100%;
clear: both;
margin-top: 5px;
padding-left: 5px;
padding-top: 10px;
}
Thanks in advance for your help.Well, I think I can help you a little bit here. For one, IE will not display a div inside of a div. Sorry. In order to do something like that you have to embed the tag into the body of your HTML document. In theory, what you're trying to do SHOULD work, but most likey won't.
Another suggestion would be to just use a table or P STYLE border around your info. (Sorry if I didn't help you much, I'm not very partial to scrole bars when aligning info in the middle of the page.)Originally posted by razor2341
For one, IE will not display a div inside of a div.
what?!?!?
this is like the basis for all css based layouts. Nested div's are totaly legit.
Originally posted by razor2341
Another suggestion would be to just use a table
Don't use tables for non tabular data (ie. layout)
To the original poster, you will want to use the max-height attribute, and implement owens hack for IE users (see PeOfEo's second post on this (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=28440&perpage=15&pagenumber=3">http://forums.webdeveloper.com/showthre ... genumber=3</a><!-- m -->) page)samij586, thanks for the link. However, I am a little confused as to what div this code should be used on. Looking at my code example, I would think it would need to be applied to each of my left and right divs. If that is done, would I need to do anything to my container div?Use this CSS at the top of your page
<style>
#left, #right {overflow-y:scroll}
</style>I get the expected results in NN for my right div, but my left div does not resize to match that of my right div. In IE, it only stays at one size, and shows a scroll bar when the content exceeds that size.
I need a cross-browser (mainly IE and NN) solution that will make both the left and right divs resize to the exact same size when the content of either exceeds the minimum height.
Can anyone help with this? The earlier suggestion seemed to help with NN, but not IE. I have seen some other sites that do what I am trying to do, but they have been 3 columns, and not 2. Any help on this subject is greatly appreciated.