|
CSS - Div Height Not Stretching
http://www.gamecitadel.com/reviews/31
In firefox: All content in the middle between the header and footer is in a div called mainContent Code:
#mainContent {
background-color: #323333;
background-image: url(images/index/contentBG.gif);
width: 779px;
height: 700px;
margin-top: 7px;
}
when the height is set, as is above, the mainContent div will only go to that height, and the content within it will continue down past(outside) of the div. if the height is removed, the mainContent div doesnt show at all. shouldnt the content inside the mainContent div determine its height? What have I forgotten to add? In IE: Works perfect Similar TutorialsI am attempting to build a site with a fixed-width column that automatically centers in a window. In addition, I need the center color to extend to the bottom of the browser OR to the end of the content, which ever is longer. Right now, everything works great, until the content requires the page to scroll (either due to longer content or a shrunk browser window). For some reason, even though the "testing" text will continue, the background color stops short. How can I make the background always extend to the bottom of the text, no matter the browser size or content length? (I do have a much more complicated site built with an external style sheet, but to save hastle, this is a stripped down version showing just the issue I am having. The problem doesn't change even with nesting elements in the "main" div). Sorry if this question is dumb/obvious to anyone, I have tried finding a solution and it just seems to elude me. Thanx for any help anyone can offer! Code: <html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
text-align:center;
background-color:#1a5026;
color:#09380e;
height:100%;
margin:0;
padding:0;
}
#main {
background-color:#d1e2b8;
margin-left:auto;
margin-right:auto;
width:900px;
height:100%;
position:relative;
}
</style>
</head>
<body>
<div id="main">
<br>
<br>
<br>
TESTING
<br>
<br>
<br>
TESTING
<br>
<br>
<br>
TESTING
<br>
<br>
<br>
TESTING
<br>
<br>
<br>
TESTING
<br>
<br>
<br>
TESTING
<br>
</div>
</body>
</html>
Hello all. I am working on a sign on page that uses two divs nested in a table. I have a header above them, and a footer below, and I want the divs (which have a nice gradient background) to stretch all the way down to the footer, regardless of the amount of content. In a simplified format, I have: Code:
<table cellpadding="0" cellspacing="0" style="height:100%; padding-top:20px; padding-bottom:20px; width:976px;" border="0">
<tr>
<td class="wrapper1" id="wrapper1" valign="top">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td valign="top" width="100%" style="border:3px dotted black; height:100%;">
<table style="width:100%; height:100%;" border="1">
<tr>
<td valign="top" style="height:100%;">
<xsl:call-template name="bodyContainerTemplate"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
The tables stretch just fine. Where I am running into problems is in my bodyContainerTemplate. That template looks like: Code:
<!--bodyContainerTemplate-->
<div class="bgcolor1" style="width:976px; height:100%; border:2px solid;">
<div class="login_bg" style="height:100%;" id="login_bg">
<table width="100%" height="100%" border="0" style="position:relative;">
<tr>
<td>
My content goes here
</td>
</tr>
</table>
For some reason, once it gets into the template, height:100%; doesn't work anymore, and the divs simply stretch big enough to make room for the content. What styles am I missing for those divs to be 100%? I have messed with: min-height height:auto, relative, etc. margin:0 and a few other things, none of which are seeming to make a difference. Thanks! Hi, I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page). The site is: http://67.18.220.222/~duoboots/2005/z.html Stylesheet: http://67.18.220.222/~duoboots/2005...s/style2005.css As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution) Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen. However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops. Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS. Here's some CSS: Code:
body, p {
color:#666666 ;
font-family: Verdana, Arial ;
font-size:7.5pt ;
font-weight:normal;
}
body {
height:100%;
margin: 0px;
background-color: #2F201E;
}
#container {
width: 968px;
height:100%;
}
#nav {
width: 201px;
border-right: 3px solid #FFFFFF;
background: #8D603B;
float: left;
min-height:100%;
}
I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated! Thanks a lot! I have two divs floated inside another div, but the outside div isn't stretching to accommodate the inner divs. Why not? The TMPL tags are used by the HTML::Template perl module. html Code: Original - html Code <div class='photo-navigate'> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF> </div> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF> </div> </div> <div class='photo-navigate'> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF> </div> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF> </div> </div> css Code: Original - css Code div.photo-navigate { border: 1px solid black; background-color: #eeeeee; }
div.photo-navigate {
I read a thread on div streching but I didn't totally understand what was going on in that particular case so I thought I create a new thread and throw my code up as well. I'm trying to have a minimum height with a footer anchored at the bottom of the div (contained within it for the bg image to carry through behind the footer). But I can't seem to get all the pieces to work together. The problem I'm dealing with now is that the div won't stretch and the footer will be pushed down way too far. Here is what's happening. So how do I get the div to keep a minimum height of 706px or like 80% and then how do I get it to auotmatically stretch with the content and keep the footer anchored at the bottom of the stretched div? Here's the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url(binkwaffle.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY>
<div id="main">
<div id="header"></div>
<div id="topnav">
<a href="index.php" class="topnav">home</a>
<a href="cards.php" class="topnav"> cards</a>
<a href="faq.php" class="topnav"> faq</a>
<a href="about.php" class="topnav"> about</a>
<a href="contact.php" class="topnav"> contact</a>
</div>
<!-- START EDITABLE AREA-->
<div id="content" class="binkwaffle">
<div>
<p>Hello</p>
<p> </p>
<p>This</p>
<p> </p>
<p> </p>
<p>is</p>
<p> </p>
<p> </p>
<p> </p>
<p>a</p>
<p> </p>
<p> </p>
<p> </p>
<p>test</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>to</p>
<p> </p>
<p> </p>
<p> </p>
<p>seee</p>
<p> </p>
<p> </p>
<p> </p>
<p>if </p>
<p> </p>
<p> </p>
<p>this</p>
<p> </p>
<p> </p>
<p>is</p>
<p> </p>
<p> </p>
<p>working.</p>
<p> </p>
<p>thank you.</p>
<p> </p>
<p> </p>
</div>
<div id="footline">
</div>
<div id="footer" class="copyright">copyright 2006 binkwaffle
<div id="bottomnav">
<a href="index.php">home</a>
<a href="cards.php"> cards</a>
<a href="faq.php"> faq</a>
<a href="about.php"> about</a>
<a href="contact.php"> contact</a>
</div>
</div>
</div>
<!-- END EDITABLE AREA-->
</BODY>
</HTML>
I know I've seen lots of questions on div sizing and positioning, but I apparently haven't been able to follow them. So I wrote out some very basic containers, and am looking for some very basic answers, even if they're only "no, it won't work." So let's say I have a layout like this: PHP Code: <div style="height: 100%; width: 100%; border: 2px red dashed; text-align: center;"> <!-- outside div --> <div style="height: 200px; width: 300px; border: 2px blue solid; text-align: left; margin-left: auto; margin-right: auto; "> <!-- centered div --> <div style="height: 100px; width: 100px; border: 2px green dashed; text-align: left; float: left;"> <!-- floated div 1 --> hello world 1 <!-- /floated div 1 --> </div> <div style="height: 100px; width: auto; border: 2px orange dashed; text-align: left; float: left;"> <!-- floated div 2 --> hello world 2 <!-- /floated div 2 --> </div> <div style="font-size: 0px; height: 0px; width: 0px; clear: both;"> <!-- clear div / --> </div> <!-- /centered div --> </div> <!-- /outside div --> </div> What I want to happen is for the orange div (floated div 2) to fill the rest of the width of the surrounding blue div (centered div). I know with this simple example I can simply set the pixel width, but I want to eventually make it more dynamic, allowing for variable sizes, like if I set the blue div to be a percentage instead of a fixed width. Any ideas? (Even links to appropriate threads are appreciated!) Thanks! (edit: had to update "centered div" to be firefox compatible) I know this has been done to death but all the fixes I looked at on here didn't seem to help me... Essentially I'm trying to create a three-column layout plus a header and footer for an email. The left and right columns essentially act as thick borders and the middle column is for content. As such I want the left/right columns to stretch to the height of the middle column. Someone suggested that I wrap them in a div with the height set to 100% so that they expand to fill that space, but it hasn't worked. As such the content breaks the layout and the borders don't continue down with the rest of the content. Here's the code (minus header + footer divs): Code: <div name="column" id="column" style="width:600px; height:100%;"> <div style="padding:0px; margin:0px;"> <div name="leftbar" id="leftbar" style="float:left; width:20px; height:100%; background-color:#69696b; border-left:1px solid #252429; border-right:1px solid #bcbcbe;"></div> <div name="contentbox" id="contentbox" style="text-align:left; width:553px; float:left;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> </div> <div name="rightbar" id="rightbar" style="float:right; width:20px; height:100%; background-color:#67666b; border-left:1px solid #e0dfe4; border-right:1px solid #302f34;"></div> </div> </div> This is probably a really simple fix but it's been making my head hurt. Ideally I'd have turned those borders into background-images and set them to repeat-y but HTML emails don't like background images. Any ideas? Hey I'm new at this forum, and also new with tableless layouts. I wanted 2 small divs at the left and right side of the main content div. Everything went ok, till I putted some content in. None of the divs expanded in Firefox and in IE just the maindiv streched. Layout: www.dennisenderink.nl/test2 Stylesheet: www.dennisenderink.nl/test2/stylesheet.css Can you help me out please? Ok, iv had this problem alot when making sites, however this time it seems to be more complicated. http://area51.chicagowars.com/templates/modern_rouge/index.php is a site im working on. However the background in <div class="outer"> wont stretch. Iv used clearfix CSS such as Code: div.inner:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
/* hide from IE-mac \*/
* html .inner {
height: 1%;
}
div.inner {
display: block;
}
/* end hide */
and the simpler Code: div.clearfix
{
height: 0;
clear: both;
}
<div class="clearfix"> </div>
You'll be able to see these in the script. Iv done this kind of thing before (http://www.rap-wars.com) where i had tyhe same problem, but this time its not workin, i think its the breadcrumbs thats complicating things! Does anyone have the solution? When I shrink my browser to the left my div slides to the left out of view. Is there a way to create a cut off point so my div can neatly meet the edge of the browser and stay put when minimizing the browser to the left? Here's a question I can't seem to fix. I have nested DIVs and when the nested DIVs receives text/content it will stretch, but the parent DIV of that DIV won't stretch with it. Causing the nested DIV to stretch beyond the border of the parent DIV. I've temporarily(sp) tried to fix the problem by putting tables in it, but any help with this would be appreciated. Thank you. ^_^ Ok so www.gameyin.com/index.php You will see a dotted border flowing up the left nav bar, and below advertisements (Yes I know I'm using tables. I will eventually move them onto a roll over menu.) I have it set up so it should only be dotted border for the ads. But it is going around everything. Weird. Here is.. CSS for it. Code: .advertisement {
font-weight: bold;
color: #000000;
border: 1px dotted;
width: 100%;
}
.advertisement p {
font-weight: bold;
color: #000000;
clear: both;
text-align: center;
}
HTML for it Code: <div class="advertisement">
<p>Have A Look At Some Of Our Sponsors</p>
<img src="images/ad1.gif" alt="Ads" />
<img src="images/ad2.gif" alt="Ads" />
<img src="images/ad3.gif" alt="Ads" />
<img src="images/ad4.gif" alt="Ads" />
<img src="images/ad5.jpg" alt="Ads" />
<img src="images/ad6.gif" alt="Ads" /><br />
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
</div>
You will see more if you go to site and see what I mean. Dunno if I got all the HTMl for it and CSS. I wrote it a while ago with the problem. Just never got around to trying and fix it . Another question with this menu: Austin360 Does anyone know how they made the widths of the submenu items stretch/adjust wider for more text, while the top level stays the same? I have a couple of dropdown templates, but the submenus are only as wide as the top level list items. (If their text is wider, the top level item is stretched too -- not what I want) Thanks in advance! Hello, I have a div element within a series of nested tables. the width of the cell that the div element is in is set to "45%". My div element has a CSS style of "overflow:auto;" meaning I want scrollbars to appear if the contents of the div are larger than the alotted space. For some reason, the scrollbars appear, however, My div element stretches and pushes other elements off of the screen. Is anyone aware of any bugs or something that could cause this? The thing that is really strange is that I only have this problem when the table within the DIV contains elements that have the nowrap attribute set to true. Thanks, Crystal Hopefully this is an easy question, how is this done to fill a frame, without repeating, just to stretch it out and fill up a frame? Hey everyone, my first time exploring page layouts using CSS and I'm having a few problems. I have a simple page with separate Header, Navigation and Content divs stacked on top of each other inside of a wrapper div (used to align the three to the center), with another div for the Footer placed below everything else. Here's how it looks now: Code: <html> <head> <title>CSS Divisions</title> <style type="text/css"> #Wrapper { width:800px; margin-left:auto; margin-right:auto; text-align:left; } #Header { width:800px; height:120px; background:#FC6;} #PNav { width:800px; height:40px; float:left; background:#CCC; } #Content { width:800px; height:400px; float:left; overflow:hidden; background:#FFC; } #Footer { width:100%; height:80px; float:left; text-align:center; background-color:#FC6; } </style> </head> <body> <div id="Wrapper"> <div id="Header">Header</div> <div id="PNav">Navigation</div> <div id="Content">Content</div> </div> <div id="Footer">Footer</div> </body> </html>
Ideally what I want is for the page to look exactly how it is, but with the footer stretching from the bottom of the Content div, down to the bottom of the wherever the user's browser has loaded; basically to fill the vertical remainder of the screen. I've tried setting the footer height to 100%, but that forces the page to extend vertically, and I fumbled around with about a dozen other techniques not really knowing what I was doing, and I've had no luck so far. Any help would be greatly appreciated! hello all, On my website i allow my users to use a an editor such as tinyMCE to do a write up and I store the html in my database to display later. the issue i have is how can i make sure that in the DIV where i'm displaying these writeups from the user doesn't stretch out. for example if a user puts in the code "<font size=999>TEST</font>" in their article that they are posting to my site, i don't my whole site to go out of wack due to the large font size. i want it to stay the same and just wrap the text to the next line. Thanks I'm in the middle of learning CSS and have come along alright for the most part. I have two small questions though. 1) The page I'm working on is http://www.mcconaha.com/csscenter.php. It's a three-column layout, with div boxes holding various links down the right and left sides of articles that will be posted. There is a main div that all of this sits in, and that expands just fine to whatever amount of content the article may have. But if the article were to have just a samll amount of content, the div wouldn't expand to the minimum height established by the link boxes on the right and left. How do I make that happen? I just need the light grey box to expand down to the lowest point on the page. 2) Notice the small box with the yellow border in the middle. I want this to be a copyright footer, but have a similar problem. How do I make that box appear 10px below whatever the lowest point for the main div is? Basically, I need the nav boxes to push everything down. I HOPE this can be done fluidly, so I can simply add and remove boxes quickly without needing a CSS edit...that's the goal anyway...modular nav boxes. My CSS is at http://www.mcconaha.com/csscenter.css and the page is at http://www.mcconaha.com/csscenter.php (Also note that this is really all I'm asking. I'm going to clean up the rest...just roughing it out right now.) Anyway, thanks in advance. I need to stretch a CSS set background image to fit any page. The style was set in a body tag so I may need to move stuff around. Thx for your help :P |
|||||||