|
CSS - Scroll Column (or Cell) Based On Container Height
say you have a page with 2 main columns inside a container. the right column is a sidebar. both are supplied content dynamically. i'd like the container (inclusive) to be the height of the content column (as determined by its children), and the sidebar should scroll (vertically) its content based on that size. there's a (non-functional) example attached. if you run it you can see the container takes the height of the sidebar - it (the bordered container) should end at the bottom of the content div, and the sidebar should scroll.
it's laid out using floating divs, but tables would be fine; javascript is not (per client). any ideas would be welcome. tyia. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.container {
border : 1px solid #F90; /* just to show container height */
}
.content {
float : left;
width : 400px;
height : 100%;
}
.sidebar {
float : left;
width : 400px;
height : 100%;
}
.scroller {
overflow : scroll;
height : 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
</div>
<div class="sidebar">
<div>Sidebar</div>
<div class="scroller">
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
Similar TutorialsQuestion title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? I'm looking for a CSS element that behaves like a table, where the size of the container will always be just big enough to surround the data inside, and will grow or shrink based on the content inside without having to specify any widths or heights. A div (with a border) with no width specified will go on forever horizontally. A table (with a border) with no width will stop as soon as the data inside ends. Is there a way to simulate this table behavior using CSS? Thanks Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it? is this possible, cheers heres my css: left column, is #leftNav and the right column is #contentMain PHP Code: #content { margin:0px auto; padding: 0; width: 760px; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } Hey guys, I have a site where I have a 3 column layout in the middle of the site. What I did to get it to work was made a container for the three column div with a relative position then gave the three column div an absolute position within it to position it correctly in the site. I want a border across all three columns to appear at the bottom of the page. Unfortunately though, because all three columns will differ in height depending on content the border appears at different places across the bottom. My quick solution was giving the container div a border bottom and give it a definite height (like 300px). That works fine, as long as any of the three column divs don't have more content that that, then the content will overlap the container div border. Okay Okay, I know you're probably tired of reading, so here's the css and markup that I have to help... The CSS: Code:
/*-- three column container --*/
#tcontent {
position: relative;
width: 758px;
height: 350px;
margin: 0 0;
padding: 0 0;
border-bottom: solid 1px #9E5459;
/*-- the three column div --*/
#leftcontainer {
position: absolute;
left: 0;
top: 0;
width: 175px;
height: auto;
}
#centercontainer {
margin-left: 175px;
margin-right: 215px;
height: auto;
}
html>body #centercontainer {
margin-left: 175px;
margin-right: 215px;
height: auto;
}
#rightcontainer {
position: absolute;
right: 0;
top: 0;
width: 215px;
text-align: left;
height: auto;
}
/*-- the divs that hold the content for each of the three columns --*/
#tleftcontent {
width: 175px;
height: auto;
margin: 30px 0 0 0;
padding: 0 0;
}
#centercontent {
float: left;
width: 327px;
height: auto;
margin: 27px 0 0 0;
padding: 0 15px 0 0;
voice-family: "\"}\"";
voice-family: inherit;
width: 342px;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 80%;
letter-spacing: 0em;
line-height: 1.5em;
}
#rightcontent {
float: left;
width: 215px;
height: auto;
margin: 28px 0 0 0;
padding: 0 0;
}
And now the markup: Code: <div id="tcontent"> <div id="leftcontainer"> <div id="tleftcontent"> left content here </div> </div> <div id="centercontainer"> <div id="centercontent"> center content here </div> </div> <div id="rightcontainer"> <div id="rightcontent"> right content here </div> </div> If I make the height in the #tcontent div "auto", the bottom border shoots up to the top. If I give it a definite height, the copy from either of the three column content div's overlaps it. Does anyone have any ideas on how I might be able to solve this? Thanks, I know this was a long question! -B Hey guys, I have a web layout with 1 centre column with a height of 100% (i.e. it fills the whole window from top to bottom). I have achieved this using height: 100% and its worked so far but I've just hit a problem. When the content is less than the height of the browser window it is fine - the white extends to the bottom perfectly in both FF and IE. However, if the content extends over the height of the window, the white background stops. So the CSS is making the column the height of the window without taking into consideration the content that is inside it so that when you scroll down, the background dissappears. Any help would be appreciated. The page that works fine: http://www.dgwd.co.uk/1476/site/aircadets/index.php The page that doesnt: http://www.dgwd.co.uk/1476/site/aircadets/uniform.php Thanks a lot guys. Dan Hi, i seem to be having a problem displaying my container as 100%. I have a centred column with a grey background with the following as my html and my css: Code: <html> <head> <link rel="stylesheet" href="default.css" type="text/css" /> </head> <body> <div id="container"><!--BEGIN CONTAINER--> <div id="logo"></div> <div id="motto"> <div id="telno"></div> <div id="quote"></div> </div> <div id="navigation"> </div> <div id="search"><!--BEGIN SEARCH--> </div> <div id="banner_1"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="empty"></div> <div class="box2"></div> <div id="contenthome"></div> <div id="sectiontwo"></div> <div id="sectionthree"></div><!--END SECTION THREE--> <div id="footer"></div><!--END FOOTER--> </div><!--END CONTAINER--> </body> </html> CSS Code:
*{
padding:0; margin:0;
}
body {
height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
color: #797979; margin: 0; padding: 0; background-color:#dfdede;
}
div {
border: 1px solid #000;
}
a {
font-family: Arial, Helvetica, sans-serif; font-size: 11px;
color: #66308f; text-decoration:none;
}
#container {
height: 100%; width: 927px; margin: auto;
padding-left: 10px; padding-right: 10px; background-color: #ffffff;
min-height: 100%; /* for mozilla */
}
#logo {
background-image:url(../images/logo.jpg); background-repeat:no-repeat;
height: 164px; width: 374px; float: left; margin-top: 0px; margin-left: 0px;
}
#motto {
height: 164px; width: 549px; float: right; margin-top: 0px;
}
#telno {
height: 58px; width: 549px; float: right; margin-top: 24px; text-align:right;
}
#quote {
height: 80px; width: 549px; float: right; margin-top: 0px;
font-size: 25px; color:#2a4b59; text-align:right;
}
/* top menu navigation */
#navigation {
height: 35px; width: 670px; float: left; margin-top: 0px;
}
/* search box */
#search {
height: 35px;width: 253px; float: left;
margin-top: 0px; background-color:#66308f; text-align:center; vertical-align:middle;
}
.button {margin:0px 0 -3px 5px;}
.inputbox {
width: 13em; margin:2px 0 0px 0px; color: #878484; text-align:left;
}
/* search box end */
.box{
height:52px; width:205px; float: right;
margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
}
.empty {
height: 94px; width: 205px; float:right;
}
.box2{
height:141px; width:205px; float: right;
margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
}
#contenthome {
height: 50px; width: 927px; float: left;
margin-top: 5px; margin-left: 0px;
}
#sectiontwo {
height: 50px; width: 927px; float: left;
margin-top: 0px; margin-bottom: 10px;
}
#sectionthree {
height: 50px; width: 927px; float:left;
margin-top: 0px; margin-bottom: 15px;
}
#footer {
background-color:#b3d800; height: 56px; width: 927px;
float: left; margin-top:0px;
}
#banner_1 {
height: 413px; width: 701px; float: left; margin-top: 0px;
margin-left: 0px; border-right-color: #FFFFFF; border-right-style: solid; border-right-width: 2px;
}
but for some reason i cant seem to get the container to fill the complete height of the page and i cant seem to locate what error i have made. If somebody could please help, as i would like this to work in all browsers. Thanks in advance. Hi, Hopefully someone here will have experienced this issue before..what I have done is create a div to contain all of the layout elements I want on my page. I started inserting a few of these and I noticed the container div doesn't stretch unless I specify a height which I wanted to avoid should I create an pages that have a limited amount of content and don't fill the page. Here is what I have so far here and this is what I want to achieve here As you can see I have specified a height value in the sceond example, is there an alternative way of doing this? Also is the best way to position the footer at the bottom of the container like so Code: position:absolute; bottom:0px; Thanks for any help guys. p.s. Here are my stylesheets so far Stylesheet 1 Code:
/* CSS Document */
body {
background:#CCC url(images/Bg.gif) repeat top left;
text-align:center;
}
#container {
background:#FFF;
width:715px;
border:1px solid #000;
}
#header {
background:#000 url(images/Header1.jpg) repeat top left;
width:703px;
height:172px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-top:0px none #000;
position:absolute;
left: 5px;
top: 5px;
}
#logo {
background:#000 url(images/Contemporary-Classics.gif) repeat top left;
width:383px;
height:52px;
position:absolute;
left: 15px;
top: 15px;
}
#footer {
width:715px;
background-color:#A18A39;
padding:0px;
margin:0px;
}
Stylesheet 2 Code:
/* CSS Document */
body {
background:#CCC url(images/Bg.gif) repeat top left;
text-align:center;
}
#container {
background:#FFF;
width:715px;
border:1px solid #000;
position:relative;
height:500px;
}
#header {
background:#000 url(images/Header1.jpg) repeat top left;
width:703px;
height:172px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-top:0px none #000;
position:absolute;
left: 5px;
top: 5px;
}
#logo {
background:#000 url(images/Contemporary-Classics.gif) repeat top left;
width:383px;
height:52px;
position:absolute;
left: 15px;
top: 15px;
}
#footer {
width:715px;
background-color:#A18A39;
padding:0px;
margin:0px;
position:absolute;
bottom:0px;
}
Hi guys, I have a small problem which is driving me crazy. I have a main container with two containers inside named left and right. I want a border on the main container, but i do not know the height of the main container as this will depend on the content in 'left' and 'right'. So what should I set the height of the main container to? I've tried 100% but this does not work and if I omit the geight property the main container does not show up. Any ideas? Thanks in advance, Rob. Thanks for taking the time to read my question. I have posted what I'm working on at http://www.scopicdesigns.com/ZoneAll/NewIndex.htm I have put a yellow background on the main nav container to illustrate my problem. There seems to be extra height to the .NavContainer in IE6, but it is not there in IE7 or FF. I've tried adjusting all my margins and paddings, but nothing seems to work. I also tried increasing the width of the .NavContainer, thinking that there was some sort of overflow from the last button or something, but that didn't work either. How do I get rid of this? Thanks, Brad Hi I have searched on this subject, and found the Faux Column articles, but I have failed to make use of these. The following page shows the problem LINK And CSS The text in the container div leads off the bottom of the page. The CSS is a bit of a mess at the moment because I have been messing with it trying to get this to work. I need the background of the container div to extend to the bottom of the content div. I have set min-height and heights for the body and html tags, and then for the container, as I know that the height is only taken into account if the parent has a height too. This does not work. Any suggestions? Thanks Jake Hi, I have 3 div boxes in a container, they sit side by side (i.e. 3 in a row) with different amounts of text in each div. The dilemma is that I need all the div's to be the same height as the tallest div. can someone tell me how to do this? thanks Argh. Tried a number of variations on this probably simple task. Nonetheless: In this example how do I get the 'sidebar' to fill the vertical space of the container, and ensure the 'footer' remains positioned at the bottom (which it currently does) http://www.mandgweb.net/css_test/css_test.html Thank you Here's the template I'm working on: http://dhost.info/justusvizslas/template.php Here's my problem: I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7 I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height. Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too: CSS Code: #container {
width:792px;
height:50px;
margin: auto auto;
color:#000000;
background-color:#FFFFFF;
background-image:url(design/menuimage.gif);
background-repeat:repeat-y;
}
#navigation {
width:125px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
vertical-align:top
}
#pagecontent {
width:667px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
color:#000000;
background-color:#FFFFFF;
text-align:center
}
PHP Code: <div id="container"> <div id="navigation"><?php include "nav.php"; ?></div> <div id="pagecontent"> <br />Some more content here<br /> </div> </div> Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference. Hi, I have two images which are on top of each other, and the one on top is hidden. I use JS to change the source of the top to a new image, then fade the top image visible, then change the source of the bottom to be the same as the top, then make the top hidden (and so on and so on). To position the images on top of each other, I am using position: absolute. This works well when the DIV container has a defined height, however, when not the DIV collapses upon itself and the images are not displayed. Any suggestions how I might overcome this? Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Heights</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.mod_rotator
{
position: relative;
overflow:hidden;
height: 100px;
}
.mod_rotate_image {position: absolute;}
img.mod_rotate_image.front {display: none;}
</style>
</head>
<body>
<div class="mod_rotator">
<img class="mod_rotate_image back" src="images/rotator/corporateimage1.jpg" />
<img class="mod_rotate_image front" src="images/rotator/corporateimage1.jpg" />
</div>
</body>
</html>
Well I'm running into just a few difficulties trying to enclose a object inside of another container. The problem is that the container does not repeat the background when I lengthen the boxes within it. Can someone with a excellent CSS eye take a look at this and let me know what I'm doing wrong. I've played with overflow:auto; but the problem is that I need to set the width of the container at 990px, and it doesn't seem to work if I statically set the width. http://www.obelix.ca/templates/index.html I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div: Code: <style media="screen" type="text/css">
.inner{
width: 80px;
height: 80px;
background-color: #0000FF;
}
.outer {
width: 120px;
height: 20px;
background-color: #FFFF00;
overflow:visible;
}
</style>
IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container? I have read and read through the CSS2 spec and I am unable to figure out if this is possible. Hopefully I can describe it well enough for somebody to help out. Okay, what I want to accomplish seems simple. I want a div, lets call this one "container", with a calculated height/width relative to the document (in terms of percentage). Inside this div will be another div, lets call it "header", whos width will span the length of the containing div (100%) and height is fixed, lets say 30px. Now here comes the tricky part... a third div, lets call it "content" should sit right underneath "header" and its width will also be 100% of the containing div, but the height should fill the remainder of the containing div. I can't seem to get the "content" div to fill the remainder of "container" and scroll when needed. If I specify a calculated height, the offset of the "header" div is not taken into account so "content" div does not fit properly. Thanks a ton if you can help me out. Please let me know if this doesn't make sense. |
|||||||