HTML - Child Div Cannot 100% Height Of Parenting Div
Hey,
I'm trying to make a child div become the height of the child div the height of the parents. The parent's height is calculated by the browser depending on the rows of text inside the div. But when I try it, the child div only resizes to the number of rows inside the child. Here is a better example: http://nitronet.dnip.net:8080/Nitro%...ay/index.xhtml Help? --ness Similar TutorialsHi, I have a java script function like this to open one child window form main window. Its working properly. function billingMain() { top.consoleRef=window.open('#{facesContext.externa lContext.requestContextPath}/main/billing/billingMain.jsf','window1', 'width=950,height=400' +',menubar=0' +',toolbar=0' +',status=0' +',scrollbars=1' +',resizable=0' +',location=0') top.consoleRef.document.close() } But when my child window opened, i want to open another child window from previous child window. and here is the script follows for this, function UB92Main() { top.consoleRef=window.open('#{facesContext.externa lContext.requestContextPath}/main/billing/claimInformation.jsf','UB92', 'width=450,height=250' +',menubar=0' +',toolbar=0' +',status=0' +',scrollbars=1' +',resizable=0' +',location=0') top.consoleRef.document.close() } here the second child window is not opening. How to resolve this. Thanks, Vinutha. Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar Hi everyone, I've got a page that's being generated dynamically that I need to set the last <li> in each list to a different style. As it's being generated server-side, I can't predict how many <li> items there will be or assign a .last class to the last <li> in each list manually. Now I'm not sure whether this needs a CSS/Javascript/xmls solution, so any pointers would be most appreciated. In FF & Opera (I think) I could just use the last-child psuedo class and the world would be fine, however it doesn't work in IE6... Does anyone know if anyone's produced an IE javascript fix for this that I can just apply? Or is there another nifty hack? Any pointers would be most appreciated! HTML Code: <head> <script type="text/javascript"> function addGroup() { x=document.getElementById("group").getElementsByTagName("p"); groups=document.getElementById("groupName"); var j=0,i=0; if (groups.value=="") { alert('must create one group'); } for (i=0;i<x.length;i++) { if (x[i].innerHTML == groups.value) { alert('the group name is already created'); j==1; } } if (j==0) { x.appendChild(groups); } } </script> </head> <body> <div id="group"> <p>Group03</p> </div> <p><input type="text" id="groupName" size="84" maxlength="84" value=""/></p> <p><input type="button" value="create" onclick="addGroup()" /></p> </body> I am trying to do simple HTML that read a group from a input box and append the new group to the group section under id="group" but the appendChild does not seems to work, any clue on how to make it works? I have main window and child window opened by child = window.open(adr, name, "height=200, width=600,resizable=1"); Both pages have <title>title</title> But whereas main widow has in title bar "title - Microsoft Internet Explorer" ,the child window has "http://<ip address> - title - Microsoft Internet Explorer" Why that difference? I want the ip address in child window to disappear, but don't know how. It does the same in IE6 and Mozilla. Thanks. I'm trying to set up html links in a parent window that update content in the same child window(rather than opening successive new windows with each click). Having the same target name in the anchor tag looks to be the easiest way to do this but it's not working in conjunction with a servlet mapping. This works: Code: <a href="test.html" TARGET="targetWindow">Click Here</a><BR> This doesn't work. This link will open a new window every time it's clicked Code: <a href="someURLmapping" TARGET="targetWindow">Click Here</a><BR> What is it about the servlet URL mapping that causes the links to not return to the child window? Is there another way to solve this issue? Thanks! Shawn can you detect if a page is a child? (in an iframe) if (page is a child) { parent.remoteClick('myButton'); } else { } thanks. or the opposite i suppose... if (page is a parent) { } else { parent.remoteClick('myButton'); } Sorry if my title sounds a little strange lol. I've been designing a layout for a new site of mine, and I decided to (attempt to) comply with XHTML guidelines, and use DIV's rather tables. I've got a container div, which contains a couple more divs, such as for the header, left navigation, content etc. Problem is, the left navigation bar is going to be quite long as I plan to include a skyscraper ad underneath the navigation bar, if possible. I've put the left navigation bar inside the content div (as you can see in the pictures coming up)...so when there's not much content, because the left nav will be so tall the left nav extends beyond the content box - I was hoping to find a way to make the content div stretch to accomodate this. It strangely works as desired in IE7 (http://img515.imageshack.us/img515/7070/ie7ix9.jpg), but in Firefox it doesn't ( http://img180.imageshack.us/img180/2480/ffow1.jpg) Is there any way to make the content div expand with the left nav div? Thanks very much Source code: Code: <html> <head> <style type="text/css"> body { background-color: #272727; color: #FFFFFF; font-family: Verdana, Sans-Serif; font-size: 10px; margin: 0px; padding: 0px; text-align: center; } h1 { color: #adc203; font-size: 14px; text-align: center; } a:link { color: #adc203; } a:hover { color: #444444; } a:visited { color: #bbc758; } .container { width: 775px; background-color: #1a1a1a; margin-left: auto; margin-right: auto; } .header { width: 775px; height: 141px; } .logo { width: 611px; height: 141px; float: left; } .login { background-image: url(images/login.png); width: 164px; height: 141px; float: right; } .content { background-image: url(images/content.png); width: 775 px; background-repeat: repeat-y; text-align: left; } .innercontent { padding-left: 25px; padding-right: 25px; } .linkbox { margin-top: 5px; margin-right: 15px; width: 160px; background-color: #151515; float: left; font-size: 14px; } .linkbox div { padding: 5px; padding-top: 0px; } .linkbox h1 { color: #adc203; font-size: 14px; text-align: center; } .linkbox a:link { color: #FFFFFF; text-decoration: none; display: block; padding-left: 5px; } .linkbox a:hover { color: #FFFFFF; background-color: #abc203; padding-left: 5px; } .linkbox a:visited { color: #bbc758; padding-left: 5px; text-decoration: none; } .googlebox { float: left; clear: left; margin-top: 10px; margin-right: 15px; width: 160px; height: 600px; background-color: #161616; } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo"><img src="images/logo.jpg" alt="DesignersVAULT" /></div> <div class="login">Test</div> </div> <div class="content"> <div class="innercontent"> <div class="linkbox"> <div> <h1><span style="color: #444444;">designers</span>vault</h1> <a href="link.html">Home</a> <a href="link.html">Contact Us</a> <a href="link.html">Suggest A Feature</a> <h1>tutorials</h1> <a href="photoshop.html">Photoshop</a> <a href="photoshop.html">XHTML</a> <a href="photoshop.html">CSS</a> <a href="photoshop.html">PHP/MySQL</a> <a href="photoshop.html">General Design</a> <h1>layouts</h1> <a href="photoshop.html">Free</a> <a href="photoshop.html">Premium</a> <a href="photoshop.html">Designed For You</a> </div> </div> <div class="googlebox"> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula. Nam nec nunc sed nunc malesuada pretium. Curabitur at augue. Sed pede est, ultrices sit amet, semper quis, venenatis a, turpis. Nam fermentum neque in tortor. Proin tortor. Suspendisse posuere. Duis gravida nulla a lectus. Vestibulum porttitor aliquet lorem. Morbi tortor. Fusce elementum. Quisque scelerisque mauris vitae mi. Ut et orci id augue sollicitudin auctor. Proin urna. In nibh purus, gravida vel, vehicula nec, vulputate eu, quam. Donec quis dolor. Aenean sed arcu at lectus imperdiet sodales. Pellentesque egestas. Praesent id augue. Maecenas nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed risus. Cras non ipsum. Duis mollis auctor nulla. Integer ornare orci a lorem. Praesent eleifend. Sed ac ligula et est faucibus rutrum. Aliquam felis. Sed elementum tempus erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam lacinia massa et augue. Integer vel augue id arcu viverra tincidunt. In hac habitasse platea dictumst. Nunc sodales ante et nunc. Vivamus posuere. Morbi ipsum. Aliquam fermentum sollicitudin felis. Sed varius dolor ut leo. Duis consectetuer urna id eros. Suspendisse ut ante. Maecenas quis diam. Phasellus fringilla velit. Praesent interdum rhoncus tortor. Fusce sollicitudin. Mauris a nibh nec mauris tincidunt rutrum. Mauris malesuada, tellus in accumsan dignissim, quam ligula tempor enim, interdum feugiat nisi risus in elit. Vestibulum sapien. Aliquam erat volutpat. Sed id sem ac justo laoreet elementum. Aliquam urna. Curabitur felis. Nam sed purus non lacus hendrerit aliquet. Sed a urna a metus luctus venenatis. Aenean purus ante, rutrum eu, hendrerit vitae, tincidunt quis, nisi. Duis pellentesque, justo at malesuada vestibulum, urna dolor cursus mauris, eget luctus eros massa et purus. Nam magna. Ut aliquam sodales purus. Vestibulum ut augue sit amet est elementum lacinia. Vestibulum tempor est a magna. Nulla luctus pellentesque diam. Aenean elementum turpis et tortor. Maecenas feugiat rutrum erat. Nullam ac elit. Donec auctor gravida ligula. Vivamus posuere dui a arcu. Suspendisse potenti. Morbi dolor augue, sagittis quis, accumsan quis, aliquam molestie, enim. Phasellus faucibus odio id neque. Curabitur iaculis ligula ac purus. In quis ante ac ante bibendum vestibulum. Etiam a lacus id est rhoncus ultrices. Morbi vitae magna et erat porttitor luctus. Aliquam erat volutpat. Curabitur sit amet sapien sit amet nulla faucibus accumsan. Nam ornare, mauris vel dignissim commodo, risus dolor scelerisque purus, viverra porta lectus tortor quis mauris. Etiam at turpis eget nisi cursus pulvinar. Suspendisse ultrices. Vivamus blandit scelerisque odio. Curabitur fringilla eleifend nisi. Quisque vel purus vitae turpis auctor iaculis. Maecenas est pede, malesuada vel, adipiscing semper, adipiscing quis, tortor. Donec vitae nisl vel dolor lacinia sodales. Sed tempor. Nullam congue condimentum ante. Suspendisse blandit, nulla quis condimentum varius, tellus est posuere augue, a suscipit sem nulla dictum orci. Nunc sagittis turpis at ante. Donec sit amet massa et nulla lacinia mollis. Donec blandit, justo et faucibus tincidunt, pede massa eleifend tellus, id tristique mi nulla a nibh. Quisque commodo lacus nec diam. Aliquam suscipit. Aliquam a ante. Integer tincidunt purus vel pede. In hac habitasse platea dictumst. Etiam at nisi quis velit scelerisque ultricies. Sed dui lorem, fringilla sit amet, ultrices blandit, auctor a, magna. </div> </div> </div> </body> </html> Hi, I have a table in which some entries open a new window with the required information. when a new window is opened, my parent page scrolls to the top, and again I have to search for the row where I had been previously, What property should I set as to avoid this? Please reply.. I have a parent div=body, and four child div's=sidebar (dark gray), spacer1, content (white), and spacer2. Those are not the backgrounds of the individual div's. I'm using a faux columns method of taking the parent's bg and y-repeating it. You can see the problem below. This works in IE6, but not in Firefox. This would lead me to assume there's a problem in my coding, but the way FF is displaying it...it's like firefox is placing it in a different column just to peeve me off. In IE6 (perfect): In FF (looks like script was placed in spacer1 column--padding:10 for content div) I noticed it repeated correctly for the first div, but it's like it started over with the spacer1 div and doesn't even repeat down: Here is the code: 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>DCS College Football Ratings and College Football News</title> <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" /> <script src="scripts/mootools.v1.11.js" type="text/javascript"></script> <script src="scripts/jd.gallery.js" type="text/javascript"></script> </head> <body background="images/bg.png"> <div id="container" style=" width:785px; background:inherit; height:auto; margin:0 auto;"> <div id="header" style="background:url('images/layout_01.png'); width:785px; height:121px;"></div> <div id="navbar" style="background:url('images/layout_02.png'); width:758px; height:26px; padding-top:9px; padding-left:27px; clear:both;"> <font color="#cecece" face="Verdana" size="2"><b>»Home »The D-Report »DCS Ratings »Custom Helmets »About the DCS</b></font></div> <div id="subheader" style="background:url('images/layout_03.png'); width:785px; height:49px; clear:both;"></div> <div id="body" style="background:url('images/contentbg.png'); width:785px; height:auto; float:left;"> <div id="sidebar" style="background:inherit; width:260px; padding:10px; height:auto; float:left; "> <font face="verdana" color="#cecece" size="3"><b>The D-Report</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current DCS news article here. More typing going on to fill up some more space, ya know what I mean?</b></font><br><br><br><br><font face="verdana" color="#cecece" size="3"><b>DCS Ratings</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current DCS ratings update here. More typing going on to fill up some more space, ya know what I mean?</b></font><br><br><br><br><font face="verdana" color="#cecece" size="3"><b>Custom Helmets</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current custom helmet here. More typing going on to fill up some more space, ya know what I mean?</b></font></div> <div id="spacer1" style="background:inherit; width:17px; height:auto; float:left; "></div> <div id="content" style="background:inherit; width:440px; padding:10px; height:auto; float:left;"> <div id="myGallery" style="width: 438px !important; height: 250px !important;" ><script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true, showArrows: false, showCarousel: false }); } window.addEvent('domready', startGallery); </script> <div class="imageElement"> <h3>Item 1 Title</h3> <p>Item 1 Description</p> <a href="mypage1.html" title="open image" class="open"></a> <img src="images/brugges2006/1.jpg" class="full" /> <img src="images/brugges2006/1-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 2 Title</h3> <p>Item 2 Description</p> <a href="mypage2.html" title="open image" class="open"></a> <img src="images/brugges2006/2.jpg" class="full" /> <img src="images/brugges2006/2-mini.jpg" class="thumbnail" /> </div> </div></div> <div id="spacer2" style="background:inherit; width:28px; height:auto; float:left; "></div> </div> <div id="footer" style="background:black; width:785px; height:86px; clear:both"> <div id="contentfooter" style="background:url('images/layout_10.png'); width:460px; height:52px; margin-left:297px;"></div> </div> </div> </body> </html> Could it have something to do with the image scripting? hiii all, i am making 2 html pages. one is parent window and another is child window but i want, when i click on a link of child window , parent page will load but with diff frame on parent page i am able to reload the parent pag but the same form will appear so how can i load diff form when parent page is reload?? please mention code for both child and parent page and i am using html e\with java script please reply thanks i have 2 frames in my parent frame say 1.htm ie left frame and 2.htm ie right frame now this 1.htm is quite a long frame and has a scrollbar and 2.htm is a short one i dont the scroll bar beside my frame 1 but want it to be for my entire parent window ie i wont to scroll both my left and right frames together how do i do that okay so i have page, i want it to build itself to encompass at the minimum 100% of the browsers height dynamically i have seen a few methods of doing this via css and html and i have done it in the past without issue but now it wont do it anymore and im not sure why so the site is www.wiffleague.com/main.php (you may have to maximize browser to see what i mean) i want the footer section (at the bottom, the table with the copyright info in it) to always be bottom justified no matter the height of the rest of the page. currently what occurs is that if the page does not have enough content to fill the vertical height then it simply appends the footer section at the bottom of that and then a blank space under the footer. I have two columns in my page layout. I would like them to be the same height without declaring an exact height for both coloumns. Is there anyway to do this. I have attched a simple example of what I mean. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .column1{ border: solid 1px black; width: 400px; margin: 20px; padding: 5px; margin-left: 100px; background-color: aqua; height: auto; } .column2{ border: solid 1px black; float: right; width:400px; padding: 5px; margin: 20px; margin-right: 100px; background-color: #92c847; } .holder{ border: 1px solid black; overflow: hidden; } </style> </head> <body> <div class="holder"> <div class="column2"> <h4> Column 2</h4> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> </div> <div class="column1"> <h4> Column 1</h4> <p>This should be the same height as column2</p> </div> </div> </body> </html> Thanks Calyspo Hi, I have a table and I need a background in one cell to extend down to the bottom of the cell (which is also the bottom of the page) from a certain point (below the content of that cell). I figured I would just use a div to do that... like this <html> <head> <style type="text/css"> .divbg { background:url(tree.jpg); height: 100%; } </style> </head> <body> <table> <tr> <td> <p>Content</p> <div class="divbg"> </div> </td> <td> <p>Content takes up a lot of space here and continues down the page a bit, so that is why the background in the cell to the left has to continue down the page.</p> </td> </tr> </table> </body> </html> Unfortunately, that didn't do anything. It just left me with a strip of my background image right under the content. So... I discovered online that you have to set the parent to 100% as well. I made the td <td height="100%"> and with no luck, I made the table <table height="100">. This just did really weird stuff and I realized what the problem was. This was making the div 100% height of the window itself. All I want is for the div to go from top to bottom (not including the content at the top of the cell). Is this even possible? Let me know if my explanation is unclear... Thanks! P.S. In the real site I am using XHTML 1.0 Transitional if that makes a difference. I might be able to change that though, if I need to. It was just the default that Dreamweaver put there. I'm not sure what the rest of the site would look like if I changed that now. This html code works in Google Chrome (100% height), but not in IE (25% height). How can i fix it so IE shows it correct? 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <title> Welcome </title> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; } object { width: 100%; height: 100%; } .center { text-align: center; margin-top: 20%; } </style> </head> <body> <div class="holder"> <object type="application/x-shockwave-flash" data="preloader.swf"> <param name="movie" value="preloader.swf"/> <div class="center"> To use this site you must have Javascript enabled and be using the current version of Adobe Flash Player. <br/> <br/> <a href="http://get.adobe.com/flashplayer/"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" style="border: 0px;"/> </a> </div> </object> </div> </body> </html> I'm having problems with making a div height to 100%. What i mean is that the div height stretches to how long the contents of the page is. If you check out my sample here, the green div on the left only stretch to the windows "visible" viewing area, then if you lower, the height doesn't go any lower than that. any idea? HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> </head> <style type="text/css"> body{ margin:0px; height: 100%; min-height: 100%; max-height: 100%; } #left{ position: absolute; z-index: 1; left: 0px; top: 0px; background-color: red; width: 100px; height: 100%; } </style> <body onload="fixheight()" onresize="clearTimeout(t);t=setTimeout('fixheight()',10);"> <div id="left"> <div style="width: 100px;background-color: green;height: 100%"></div> </div> <div align="center"> <p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p></div> </body> </html> I have a div and within that my navigation menu. My menu is made up of ul with their styles removed and floated left to make the list horizontal. I'm trying to make the background colour of my div white, but it doesn't have any height so it's not showing up. Ok I have been racking my brain on this one for two weeks and I still cannot find an answer to this, which I know I will kick myself when I find out. I have this sidebar in a table and the sidebar spans 4 Rows the problem is that each cell does not condense down to the smallest size possible and I don't know what to do to fix it. The page in question is at http://wentworthatdraper.com/test/ The page renders great in Chrome but not FF and IE I'll put all the code I think is relevant here. <tr> <td width="77" height="160" class="sidebar" > <div class="title"> Main </div> <div class="subtitle3"> <ul> <li> <a href="index.html">Home</a> <a href="contact.html">Contact Us</a> <a href="calendar.html">Calendar</a> <a href="news.html">News</a> </li> </ul> </div> </td> <td width="721" colspan="2" rowspan="4" class="content"> <p> Edited </p></td> </tr> <tr> <td height="272" class="sidebar" > <div class="title"> Our Community </div> <div class="subtitle3"> <ul> <li> <a href="index.html">Living With Us</a> <a href="contact.html">Meet The Staff</a> <a href="calendar.html">Testimonials</a> <a href="news.html">Photo Gallery</a> <a href="index.html">Apartment Deals</a> <a href="contact.html">Dining Services</a> <a href="calendar.html">Amenities</a> <a href="news.html">Location</a> </li> </ul> </div> </td> </tr> <tr> <td height="20px" class="sidebar"> <div class="title"> Gallery </div> <div align="center"> <img src="../test/Images/photos/happy-home.jpg" width="131" height="86" /> </div> </td> </tr> <tr> <td height="100%" class="sidebar"> <div class="title"> Our Location </div> <div class="sidewriting"> 11631 S 700 E <br /> Draper, UT 8402 <p> <a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=11631+S+700+E++Draper,+UT+8402&sll=37.0625,-95.677068&sspn=42.360237,93.076172&ie=UTF8&hq=&hnear=11631+S+700+E,+Draper,+Salt+Lak e,+Utah+84020&ll=40.540906,-111.870153&spn=0.009963,0.022724&z=16&iwloc=A" target="_blank">Get Directions </a></p> </div> </td> </tr> .sidebar { width:175px; background:url(../images/sidebar.jpg) repeat-y; vertical-align:top; margin:auto; } .title { background:url(../images/title.jpg) left no-repeat ; height:30px; padding:10px 0px 0 15px; color:#FFF; font-weight:bold; vertical-align:top; } Thank you so much for looking at this |