|
CSS - Problem With Div Stretching Only As High As It Needs To
Well i am working on a new design but there's a problem, if you go to www.majd-gfx.com you see that the left column does not stretch fully (as long as the content column)
i have searched for this and found a tutorial on alistapart.com but it wasn't very helpful as i would have had to rework the whole layout. Is there an alternative? p.s. i have tried height:auto and height:100%...neither worked.... Similar TutorialsHi I am quite familiar with CSS but am stumped on how I could do the following. Basically I need a template with a header, body and footer, I know, sounds simple right, but I need to have the middle body section of the page stretching to the height of the browser, so that the space in between the header and footer is filled in with the middle container. The middle container that stretches to the required height needs to have a background image that cannot be covered over by the header or the footer. This is the problem, because if the middle container is set to 100% height, then a scroll bar is always present because of the header and footers height. I have been able to create what I am trying to do with a table, but obviously I want to avoid using a table for a layout. Is there any way to recreate this but via CSS? Take a look at the table layout and change the size of your browser to see the effect I am aiming for, but in CSS http://labwaves.com/temp/index3.php This is an attempt in CSS, but It requires me to set the headers and footers background image to the same as the bodys background image, with I can't have . http://labwaves.com/temp/index2.php Congratulations on making it to the end of this long, but hopefully un-confusing post Thanks and any reply's are really, really appreciated as I am so stuck on this one! I'm trying to figure out the exact height of a single line of text in units of em. I have a nice tabbed navigation system going with two levels, but the 1.25em that I had estimated isn't exactly correct (I get some misalignment when changing the font size). By putting a character in a div and modifying the height of another <div> next to it, with the font at max size, I managed to come to 1.165em, but this got misaligned at a few lower font sizes. Does anyone know an accurate measurement for this? Or should I just get it close enough for "normal" font sizes? In case that didn't make sense, I'll try to illustrate with some ASCII art: Code: +---DIV---+ +-DIV-+ |some text| | | <- what height should this be to line up perfectly? +---------+ +-----+ I have a very high div which I want to resize depending on the height availible (it has the central BG image) e.g. if the user is on 1024 they dont have to scroll down for miles to see the whole page. But if the user is on a higher res then the div should become the full length available. Is this possible? I thought height: 100%; would work but it doesn't seem to do much. Also had at look at the overflow options but hidden wont do me any good because if the user is on 800x600 then you cant see the rest of the content. Any help appreciated thanks! Hi, how do i set a table to be table 100% wide 100 % high using css? i am using the new dreamweaver that includes this in the header: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> the 100% height and 100% width html values dont' work, i have tried css to get the table 100% but can't can anyone help? Paul Help! I am trying to build my site in CSS. Here is the CSS for my top layer, despite the size being specified to 130px and an image inside it being 130px high, it is still 5px too high... any ideas? Code: #page_top_sizing {
background-color: red;
width: 764px;
height: 130px;
position: absolute;
top: 5px;
left: 5px;
z-index:1;
padding:0;
}
Thanks. i have a basic navigation system - 12 items divided into 3 columns - fitted together horizontally in a row. On a windows xp machine with a high resolution display which is set to automatically resize all ie browser pages to make them appear larger (readable or lower-res) - somehow my navigation columns no longer fit into a single row... as far as i know under all other browsers/platforms the menu appears correctly. i've tested the navigation layout in opera, ie, firefox, netscape on my own windows computer, and have tested the pages using some online site that takes snapshots of your page in various browsers on various operating systems (including linux and apple).... the problem may be with the way i am calculating the pixels for the div widths? or...? the page is at gatewoodfarms.com (gatewoodfarms.com/gwf.css) a screenshot of the problem is at gatewoodfarms.com/screenshot.png here is the Basic Structure/CSS: <body style="border:0px;padding:0px;margin:0px;min-width:630px;"> <div id="wrap" style="border:0px;padding:0px;margin:0px auto;width:630px;"> <div id="top" style=""> ... <div id="nav" style="border:0px;padding:0px;margin:0px;height:90px;width:630px;"> <div id="nav1" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:right;"></div> </div> </div> <div id="main" style="border:0px;padding:0px;margin:0px;height:auto;width:630px;top:250px;"> ... </div> </div> any ideas how i can fix this? thanks! A number of years ago I created a web site for a mattress store where I worked (7 days a week, for 5 years). The point is this: I'm not a great web designer. The code is ancient and the owner wants me to bring the thing up to date. Using tables, I had a system for creating thin, vertical lines that went up and down the entire heighth of the page. The lines divided the content area from the borders in a neat way - although, again, using very old HTML. It looks like this: http://www.wholesalewarehouseinc.com What I'd found was that if I used a fixed-sized header and some tables I could produces the thin line that you see on that page. This was the basic code: Code: <table width=100% height=100% cellpadding=0 cellspacing=0 topmargin=0 leftmargin=0 rightmargin=0> <td background="http://www.wholesalewarehouseinc.com/lf.gif" width=50% align=left><td width="1" background="dot.png"> <img src="dot.png"></td> </td><td valign=top> <table cellpadding=0 cellspacing=0 border=0 rightmargin=0 leftmargin=0 bottommargin=0> <img src="logo.png"></td> <td background="http://www.wholesalewarehouseinc.com/lf.gif" width=100% align=left><td width="1" background="dot.png"> <img src="dot.png"></td> </table> My question is this, and maybe this is too general for a meaningful answer. Is there a way to do the same sort of thing with CSS? I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. 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 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 {
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 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! 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. ^_^ 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? 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! 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? 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? 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? 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 |
|||||||