|
CSS - Can A Nested Div Auto-adjust To 100% Height Of Container?
I may be trying to square the circle here. I have a container that is not the full length of the page [padding top and bottom].
Within the container, I have 2 main content elements: 1. a nested div forms a strip down the left edge, holding a decorative pattern. [note: it doesn't currently extend down the entire left edge ~ other items are above it ~ but I can include those in the strip and make it 100% if the idea is workable]. 2. the main content div is beside it. The container automatically adjusts to the height of the entire content in both divs. I'd like for the 'decorative' div to automatically adjust to 100% height of the container instead [ie. match the height of the content to the right of it - automatically]. Is this possible? Kravvitz....I know Similar TutorialsHow do you make a container div aware of the height of floated divs nested inside? I have 2 floated divs, which are contained within a container div. The container has a background image that I need to tile vertically. In FF the image does not tile unless I specifiy a height for the container other than auto. I don't want to set it to 100% because when I do, the container div extends much further than I intend it to. Here is the link to the site with the problem. CSS Code:
/* CSS DOCUMENT */
html, body {
padding: 0px 0px 0px 0px;
font: 10px Verdana, Arial, Halvetica;
height: 100%;
text-align: center;
background: url(../images/bdy_back.jpg) #252525 no-repeat center;
#container {
width: 938px;
margin: 0 auto;
text-align: left;
height: auto;
opacity: .90;
filter: alpha(opacity=90);
background: url(../images/middle2.jpg) repeat-y right #444444;
}
#lcol{
float: left;
width: 15%;
height: auto;
}
#right {
float: right;
width: 85%;
height: 100%;
}
}
HTML Code:
<div id="container">
<div class="hdr">
<div id="officer" style="display: none;"></div>
</div>
<div id="lcol">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways? Thanks, Carlos Code:
<!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>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
<div id="navbar">
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
</div>
</body>
</html>
My CSS Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
margin-top: 17px;
margin-bottom: 15px;
}
#header {
background-image: url(images/header.jpg);
margin:0 auto;
height: 167px;
width: 810px;
background-repeat: no-repeat;
}
#maincontent {
background-image: url(images/coatedmetalsm.jpg);
background-repeat: repeat;
margin:0 auto;
width: 810px;
height: auto;
}
#navbar {
float: left;
width: auto;
position: relative;
}
hello everyone, i am using css based menu . requirement is that, menu should adjust its width automatically based on the text length. Here is my css : = css Code: Original - css Code li ul li { background: #000; color: #fff; padding-top: 4px; border-bottom: 1px solid #fff; letter-spacing:1px; text-transform: capitalize; text-shadow: 2px 2px 2px #22222; width: 250px; margin:0px auto; height: 18px; font-size: 11px; font-weight: normal; text-align:left; filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; }
you just see the attachment, you would realise that , the text is cropping & not displayed. Also , can any one suggest , what can I do to make this CSS to cause make it attractive.? How do I position a fluidly nested div inside a fluid container div but have the nested div 100px from each side? At the moment the nested div is fluid by applying 100% width, but that makes the nested div the same size as the container (instead of 100px smaller on each side) and ends up overflowing the container. Without using overflow:hidden how am I supposed to nest it so it nests at the correct size? Code:
.container { position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%; }
.nest { position: absolute;
top: 0px;
left: 0px;
margin: 100px;
width: 100%;
height: 100%; }
I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear. Code: <!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=iso-8859-1" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
function initPage()
{
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
}
input {
width: 200px;
background: #f4f4f4;
border: 1px solid #999;
font-size: .9em;
/*
*/
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cAutoCompleteCtl {
position: relative;
/*
border: 3px solid red;
*/
}
.cAutoCompleteCtl input {
margin: 0 5px 0 0;
display: block;
float: left;
}
.cAutoCompleteCtl a.dwnarrow {
width: 15px;
height: 15px;
border: 1px solid #999;
background: url(images/downarrow.gif)
no-repeat;
background-position: center center;
background-color: #efefef;
float: left;
display: block;
font-size: 1px;
text-decoration: none;
}
.cAutoCompleteCtl .acCtlDropdwn {
position: absolute;
top: 20px;
left: 0px;
z-index: 100;
visibility: visible;
min-width: 300px;
max-width: 600px;
height: auto;
max-height: 200px;
background: #fff;
padding: 5px;
border: 1px solid #999;
overflow: auto;
/*
width: 400px;
*/
}
* html .cAutoCompleteCtl .acCtlDropdwn {
width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}
.cAutoCompleteCtl .acCtlDropdwn a {
white-space: nowrap;
display: block;
text-decoration: none;
padding: 2px 5px;
color: #000;
border: 1px solid #fff;
}
.cAutoCompleteCtl .acCtlDropdwn a.lastOption {
}
.cAutoCompleteCtl .acCtlDropdwn a:hover {
background: #f5f5f5;
border: 1px solid #b3b3b3;
}
-->
</style>
</head>
<body onload="initPage();">
<div class="cAutoCompleteCtl clearfix">
<input type="text" /><a href="" class="dwnarrow"> </a>
<div class="acCtlDropdwn">
<!--<a href="#">options here options here options here options here options here options here options here options here options here options here options here</a>-->
<a href="#">options here</a>
<a href="">Boulder Logic</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
</div>
</div>
</body>
</html>
I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected. The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour. Can anyone see where I'm going wrong? Hello, I have been searching through the threads in search of a solution but decide to ask outright. I am trying to develop a way for a css layer to stretch the height of a window 100% and scroll its content inside of itself. I have only been able to trigger the scroll bars inside of the content layer on using a defined pixel height for the container layer that it sits in. My main goal is to get the content layer to stretch the full height of the browser window and scroll its content so that I have no horizontal scroll bars on the browser itself but rather on the content layer. Trying to guess the height of a browser window to specify a happy medium, for different screen resolutions seems silly. Any ideas would be Gratefully appreciated! Ex: http://edward.sensite.net/Hyundai/ CSS: body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #000000; } .numbertext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; vertical-align: middle; } td { vertical-align: middle; text-align: center; } .container { position: relative; margin: 0 auto; width: 780px; height: 200px; text-align: left; } .headerlayer { position: absolute; visibility: visible; z-index: 1; height: 206px; width: 780px; top: 0px; } .contentlayer { position: absolute; visibility: visible; z-index: 2; top: 207px; width: 780px; height: 100%; background-color: #FFFFFF; overflow: auto; } 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, I think this might requiere an IE hack buti have nested divs inside a div on http://gohedonist.com/mempage.php?id=19 but for some reason instead of the divs bein constainted inide the larger div they go all the way down the screen. This is works fine in FF. The problem is located at http://gohedonist.com/mempage.php?id=19 (select Submissions from the dropdown box on the right). Thanks for any help 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, 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 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 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 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. 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. 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>
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? |
|||||||