Ok, so I have a set height for my main column on my website. It works fine, but sometimes I cut the text rather close to the bottom. If a user were to enter my website and have their font set to be larger (if they had eye problems, for example) the text runs out of the div and over my bottom box. I was thinking of using height:auto; min-height:700px; but IE doesn't seem to support it, unless I did it wrong. I was therefor wondering if one could have a vertical scrollbar appear if the text overflows the set dimension of the DIV? If anyone knows what I'm talking about, I'd be very much appreciative for help, W3 Schools (me CSS resource) doesn't seem to have this kind of information.You could try this:
div{
height:700px;
}
html>body div{
height:auto;
min-height:700px;
}Since IE treats height as min-height the above code should work because IE will ignore the second set of styles.
Alternatively, just do this:div{
height:700px;
overflow:auto;
}Thank you kindly. Is there anyway I can control the scroll bars, or could you perhaps point me to some more information on this?You cannot control the scroll-bars at all, although what would you want to do to them anyway?
overflow:auto; will put a scroll-bar down the side of your div tag if it needs one, if it doesn't then there will be no scroll-bar. Simple as that.Ah, so there's no way to stop the horizontal scroll bar? Whenever the scrollbar appears, a hroizontal one appears as well, though it only scrolls left/right a few pixels.That's not scroll-bar problem, that's a content problem. Your content is too wide for the div that contains it (the vertical scroll-bar takes up romm as well you know).
Let me take a look at the page and I'll see if I can see what's causing the problem.I had a smiliar problem a while back. I just set the width to 96%. It got rid of the horizontal scrollbar.Right now, it is filler latin, but I plan on replacing it with content. To see an example, here's the page: Text Overflow (<!-- m --><a class="postlink" href="http://www.wdhaven.com/xhtml.php">http://www.wdhaven.com/xhtml.php</a><!-- m -->)You don't need to specify a height for the middle column at all.
Here's a similar layout that uses floats. The original idea behind the layout was on Mezzoblue where Ryan Brill provided a solution to a problem (<!-- m --><a class="postlink" href="http://www.mezzoblue.com/archives/2004/01/23/friday_chall/index.php">http://www.mezzoblue.com/archives/2004/ ... /index.php</a><!-- m -->).
I have slightly modified and expanded Ryan Brills code to make it into a three column layout which coincidentally seems to be exactly what you're after.
If you want to know more about how and why this layout works, visit this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=34161&perpage=&pagenumber=1#post191090">http://www.webdeveloper.com/forum/showt ... post191090</a><!-- m -->) where I have tried my best to provide a full explanation. Look for the paragraph where I started, "OK, I have uploaded a three column..."
This layout should circumvent the need for you to specify a page height, and since it allows you to have a footer underneath your columns, no matter which is longer.Now that is definately a tres cool style sheet, which I will definately be working with. But, you see, I still would like to have a minimum height for the main column. I do NOT want to have my two columns of links and extra info, and than have a smaller main column. Even if there is a lack of content in the column, I wish it to be at least as high as the other two columns because of the background and the look it gives. But, I do NOT want to have to fill it up with needless info to accomplish this. If it weren't for f****** IE and its NO support for min-height, this would be a non-issue. Oh why, IE, why doth thou torture me so?Originally posted by MstrBob
Now that is definately a tres cool style sheet, which I will definately be working with.I'm glad you like it.
Originally posted by MstrBob
But, you see, I still would like to have a minimum height for the main column. I do NOT want to have my two columns of links and extra info, and than have a smaller main column. Even if there is a lack of content in the column, I wish it to be at least as high as the other two columns because of the background and the look it gives.Well like I posted before, there is a work around for IE.div{
height:700px;
}
html>body div{
height:auto;
min-height:700px;
}Yes, I'm sorry I forgot to post my response to that. The code gets my height set up, the column does NOT expand. Even in Mozilla, like one would think it should, it is the same as simply setting the definate height.Seems to work fine for me:Ack, sorry. I was testing it in HTML-Kit, and I forgot an apostrophe. Yeppers, 'tis working beautifully, even in I.E. Now I don't even have to worry about scroll bars! You're the best!!!Happy to help.
div{
height:700px;
}
html>body div{
height:auto;
min-height:700px;
}Since IE treats height as min-height the above code should work because IE will ignore the second set of styles.
Alternatively, just do this:div{
height:700px;
overflow:auto;
}Thank you kindly. Is there anyway I can control the scroll bars, or could you perhaps point me to some more information on this?You cannot control the scroll-bars at all, although what would you want to do to them anyway?
overflow:auto; will put a scroll-bar down the side of your div tag if it needs one, if it doesn't then there will be no scroll-bar. Simple as that.Ah, so there's no way to stop the horizontal scroll bar? Whenever the scrollbar appears, a hroizontal one appears as well, though it only scrolls left/right a few pixels.That's not scroll-bar problem, that's a content problem. Your content is too wide for the div that contains it (the vertical scroll-bar takes up romm as well you know).
Let me take a look at the page and I'll see if I can see what's causing the problem.I had a smiliar problem a while back. I just set the width to 96%. It got rid of the horizontal scrollbar.Right now, it is filler latin, but I plan on replacing it with content. To see an example, here's the page: Text Overflow (<!-- m --><a class="postlink" href="http://www.wdhaven.com/xhtml.php">http://www.wdhaven.com/xhtml.php</a><!-- m -->)You don't need to specify a height for the middle column at all.
Here's a similar layout that uses floats. The original idea behind the layout was on Mezzoblue where Ryan Brill provided a solution to a problem (<!-- m --><a class="postlink" href="http://www.mezzoblue.com/archives/2004/01/23/friday_chall/index.php">http://www.mezzoblue.com/archives/2004/ ... /index.php</a><!-- m -->).
I have slightly modified and expanded Ryan Brills code to make it into a three column layout which coincidentally seems to be exactly what you're after.
If you want to know more about how and why this layout works, visit this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=34161&perpage=&pagenumber=1#post191090">http://www.webdeveloper.com/forum/showt ... post191090</a><!-- m -->) where I have tried my best to provide a full explanation. Look for the paragraph where I started, "OK, I have uploaded a three column..."
This layout should circumvent the need for you to specify a page height, and since it allows you to have a footer underneath your columns, no matter which is longer.Now that is definately a tres cool style sheet, which I will definately be working with. But, you see, I still would like to have a minimum height for the main column. I do NOT want to have my two columns of links and extra info, and than have a smaller main column. Even if there is a lack of content in the column, I wish it to be at least as high as the other two columns because of the background and the look it gives. But, I do NOT want to have to fill it up with needless info to accomplish this. If it weren't for f****** IE and its NO support for min-height, this would be a non-issue. Oh why, IE, why doth thou torture me so?Originally posted by MstrBob
Now that is definately a tres cool style sheet, which I will definately be working with.I'm glad you like it.
Originally posted by MstrBob
But, you see, I still would like to have a minimum height for the main column. I do NOT want to have my two columns of links and extra info, and than have a smaller main column. Even if there is a lack of content in the column, I wish it to be at least as high as the other two columns because of the background and the look it gives.Well like I posted before, there is a work around for IE.div{
height:700px;
}
html>body div{
height:auto;
min-height:700px;
}Yes, I'm sorry I forgot to post my response to that. The code gets my height set up, the column does NOT expand. Even in Mozilla, like one would think it should, it is the same as simply setting the definate height.Seems to work fine for me:Ack, sorry. I was testing it in HTML-Kit, and I forgot an apostrophe. Yeppers, 'tis working beautifully, even in I.E. Now I don't even have to worry about scroll bars! You're the best!!!Happy to help.