HTML - Problem With A Div Not Expanding With Content
Similar Tutorialsthis issue is urking me, i must be missing a style. what can i do to get this page top box to cooperate. HTML 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>Untitled Document</title> <style type="text/css"> <!-- .contentTopBox { margin-bottom: 5px; margin-left: 15px; margin-right: 15px; border: 1px solid; background-color: #999999; height: 112px; } .contentTopBoxRightPortion { background-color: #333333; float: right; padding: 5; text-align: center; overflow: hidden; background-color: #333333; width: 180px; } .contentTopBoxLeftPortion { float: left; width: 79%; padding-top: 35px; overflow: hidden; padding-left: 10px; padding-right: 10px; } .contentTopBox .siteHeader { color: #666666; color: #666666; background-color: #Fefefe; border: 1px solid; font-weight: bold; font-size: 130%; padding-left: 15px; padding-top: 5px; padding-bottom: 5px; display: block; overflow: hidden; width: auto; } --> </style> </head> <body> <div class="contentTopBox"> <div class="contentTopBoxLeftPortion"><span class="siteHeader">Page Title</span></div> <div class="contentTopBoxRightPortion"><img src="mals/lib/3-wolf-rock-2.gif" alt="3 wolves carved into a rock" width="170" height="100" /></div> </div> </body> </html> on the right of the box is a 120px nav bar, and on the left is an ad banner. those arent included on this page. this bar fills in the content box area inbetween the navs. the problem im having is when viewed at 1680x1050 the bar works fine, but when the browser is crunched down towards 800x600 the image on the right flops(wraps) below the title header as if there is some percentage of width that finds itself running into the contentTopBoxRightPortion box. what i need; on the right, I need the image to be solid in place, with 5px padding around it, that takes care of the right side. and on the left i need the siteHeader bar to expand accordingly(max width atlease 1600 px for 2000px monitor) , with approximately 10px of padding on the left and the right, no matter what the browser size. Also i would like the siteHeader bar to automatically find the middle (vertical align-middle) related to varying heights that the contentTopBox may be set to to accommodate varying rightPortion images. Everything was working fine on FF when i had a 2 column table, except on IE7 of course, but i really DONT LIKE TABLES, and want to do away with them i have tried span tag vs. div tags, and clearing divs, and of course every type of float and overflow, and switching the location of the left column and right column code in the html, so i must be missing something, and am spending way too much time on this otherwise simple issue :-). what am i missing? Hi everybody! OK..i am a complete newb when it comes to coding and web design. I have been trying to build a website for a new online business I'm starting. Its not finished but i thought i'd publish it and check it on a few browsers, its fine in Safari, Firefox but in IE7 it looks terrible. Dreamweaver is telling me i have an expanding box problem. I have read around and tried a few workarounds but nothing seemed to work, but then i don't really know what i'm doing! Can anybody help? the URL is: www.atomicaudio.co.uk any advice would be greatly appreciated thanks, Dan Hi Guys, I have a page that seems to render fine in Firefox, but looks awry when I view it in IE. Could someone point out what the problem is and how to fix it? I've done some research on my own, and think it might have to do with IE's expanding box problem: http://www.adobe.com/cfusion/communi...NG_BOX_PROBLEM However, I haven't done much coding since 2001, so I could really use a helping hand. Thanks very much. URL of problem page: http://cervantes.webng.com/sims.html This is my first post, and I am new to html so here goes. I am working on a project using google earth. I need to have the screen divided into a quad panel. I was using a table 2x2 to do this, but the project has progressed to needing a little more than just a table. So as of now I have 2 divs and only one will display the plugin. I am not even sure if I am in the right direction, but here is my code. <style type="text/css"> <!-- #pane1 { border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; height: 50%; width: 50%; left: 0px; top: 0px; } #pane2 { border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; height: 50%; width: 50%; right: 0px; top: 0px; } </style> <div id="pane1"> <script src="http://www.google.com/jsapi? key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script> <script type="text/javascript"> var ge; google.load("earth", "1"); function init() { google.earth.createInstance('pane1', initCallback, failureCallback); } function initCallback(instance) { ge = instance; ge.getWindow().setVisibility(true); // add a navigation control ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO); // add some layers ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true); // in this sample we will attempt // to fetch a KML file and show it function finished(object) { if (!object) { // wrap alerts in API callbacks and event handlers // in a setTimeout to prevent deadlock in some browsers setTimeout(function() { alert('Bad or null KML.'); }, 0); return; } ge.getFeatures().appendChild(object); var la = ge.createLookAt(''); la.set(37.77976, -122.418307, 25, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 500); ge.getView().setAbstractView(la); } // fetch the KML var url = 'http://example.com/' + 'kml/Network_links/RMLS/NL_Sched_rmls_Outages_by_Creator_and_Int.kml'; google.earth.fetchKml(ge, url, finished); document.getElementById('installed-plugin-version').innerHTML = ge.getPluginVersion().toString(); } function failureCallback(errorCode) { } </script> <body onLoad="init()" > </div> <div id="pane2"> <script src="http://www.google.com/jsapi? key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script> <script type="text/javascript"> var ge; google.load("earth", "1"); function init() { google.earth.createInstance('pane2', initCallback, failureCallback); } function initCallback(instance) { ge = instance; ge.getWindow().setVisibility(true); // add a navigation control ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO); // add some layers ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true); // in this sample we will attempt // to fetch a KML file and show it function finished(object) { if (!object) { // wrap alerts in API callbacks and event handlers // in a setTimeout to prevent deadlock in some browsers setTimeout(function() { alert('Bad or null KML.'); }, 0); return; } ge.getFeatures().appendChild(object); var la = ge.createLookAt(''); la.set(37.77976, -122.418307, 25, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 500); ge.getView().setAbstractView(la); } // fetch the KML var url = 'http://example.com/' + 'kml/Network_links/RMLS/NL_Sched_rmls_Outages_by_Creator_and_Int.kml'; google.earth.fetchKml(ge, url, finished); document.getElementById('installed-plugin-version').innerHTML = ge.getPluginVersion().toString(); } function failureCallback(errorCode) { } </script> <body onload="init()" > </div> Hi I have a page designed to be centered in the browser... not a problem. However, I have just added a drop down menu (taken from http://www.dynamicdrive.com/dynamici...rome/index.htm) and now the divs which contain the drop down content seem to be centering inside the browser as opposed to sitting under the menu titles like they should. In other words, they are behaving independently of the top level menu... not good! Here's the link - http://www.horizonwebsites.co.uk/snoworks/ I've tried many little changes but I'm definately missing something here. Any help would be great. Kev I have a content alignment issue in IE and I can not find the problem anywhere. In FF it looks perfect but in IE the content is at the bottom of the page and I do not know what or what I am overlooking and missing. I don't know if it is the php throwing it off. I wouldn't think so though. Here is the page: http://www.mesquitechristmas.com/local/display.php?id=2 Here is the code: PHP Code: <?php include ('db_connect.php'); if (isset($_GET['id'])) { $id = mysql_real_escape_string($_GET['id']); $sql = "SELECT * FROM users WHERE id = $id;"; if ($result = mysql_query($sql)) { if (mysql_num_rows($result)) { $row = mysql_fetch_array($result); $displayname = $row["displayname"]; $displaytype = $row["displaytype"]; $address = $row["address"]; $city = $row["city"]; $state = $row["state"]; $postal = $row["postal"]; $country = $row["country"]; $rating = $row['rating']; $votes = $row['votes']; $imgurl = $row['imgurl']; $comments = $row['comments']; } else { die("No user found"); } } else { die(mysql_error()); } } ?> <!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" /> <meta name="description" content="Mesquite Texas Country Christmas" /> <meta name="keywords" content="Mesquite, Texas, Country Christmas" /> <meta name="author" content="NA" /> <link rel="stylesheet" type="text/css" href="/stylesheet.css" media="screen" title="FBC" /> <script type="text/javascript" src="drop_down.js"></script> <title>A Mesquite Country Christmas</title> </head> <body> <div id="wrap"> <a href="/index.html"> <img id="frontphoto" src="/images/header.png" width="760" height="237" alt="Mesquite Country Christmas" border="0"></a> <div id="menu"> <h2 class="hide">Menu:</h2> <ul id="avmenu"> <li><a href="/index.html">Home</a></li> <li><a href="/christmasstory.html">The Christmas Story</a></li> <li><a href="/directions.html">Directions</a></li> <li><a href="#">Information</a><ul> <li><a href="/information.html">Display Facts & Info</a></li> <li><a href="/faq.html">FAQ</a></li> <li><a href="/playlist.html">2008 Playlist</a></li> <li><a href="#">Christmas History</a></li> </ul></li> <li><a href="#">Photos</a> <ul> <li><a href="/2007photos.html">2007</a></li> </ul></li> <li><a href="#">Videos</a> <ul> <li><a href="/2007videos.html">2007</a></li> </ul></li> <li><a href="/guestbook.php">Guestbook</a></li> <li><a href="/webcam.html">Web Cam</a></li> <li><a href="/webradio.html">Internet Radio</a></li> <li><a href="http://www.noradsanta.org/" TARGET="_blank">Track Santa</a></li> <li><a href="/projects.html">Projects & How Tos</a></li> <li><a href="/links.html">Links</a></li> <li><a href="/contact_us.html">Contact Us</a></li> </ul> <center><a href="http://www.toysfortots.org/" TARGET="_blank"><img src="/images/toys_for_tots.jpg" border="0" width="110" height="153" vspace="10"></a></center> <center><a href="http://christmas.bronners.com/2007/house/534.html"><img src="http://christmas.bronners.com/voteforme/vote.jpg" border="0" width="110" height="153" alt="christmas decorations" vspace="10"></a></center> </div> <div id="content"> <div class="fadebox"> <h2><? echo $row['displayname']; ?></h2> <hr /> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"><img src="<? echo $row['imgurl']; ?>" class="border" height="345" width="460"></td> </tr> <tr> <td> <table align="center"><tr><td>Rated 0 from 0 people | <b>Rate This</b>: <a href="displays.php?id=<?php echo $row['id']; ?>&rate=1">1</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=2">2</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=3">3</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=4">4</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=5">5</a> </td><td> </td></tr></table></td></tr></table> <table align="center" style="border-top: 1px solid rgb(51, 102, 51);" border="0" cellpadding="4" cellspacing="0" width="100%"> <span class="title">About this Display...</span> <tr><td class="bg2" width="100"><b>Display Name</b>:</td><td class="bg2"><? echo $row['displayname']; ?></td></tr><tr><td class="bg1"><b>Display Type</b>:</td><td class="bg1"><? echo $row['displaytype']; ?></td></tr><tr><td class="bg2"><b>Description</b>:</td><td class="bg2"><? echo $row['description']; ?></td></tr><tr><td class="bg1"><b>Address</b>:</td><td class="bg1"><? echo $row['address']; ?><br><? echo $row['city']. "," . $row['state']. " " . $row['postal']; ?><br><? echo $row['country']; ?><br><a href="http://www.mapquest.com/maps/map.adp?searchtype=address&formtype=search&countryid=US&addtohistory=&country=US&address=<? echo $row['address']; ?>&city=<? echo $row['city']; ?>&zipcode=<? echo $row['postal']; ?>&historyid=&submit=Get+Map" target="_NEW"><b>Get Directions</b></a></td></tr><tr><td class="bg2"><b>Website</b>:</td><td class="bg2"><a href="<? echo $row['website']; ?>" target="_blank"><? echo $row['website']; ?></a></td></tr><tr><td class="bg1"><b>Sponsor Links</b>:</td><td class="bg1"> <script type="text/javascript"><!-- google_ad_client = "pub-8048181801684156"; //displays google_ad_slot = "4239948836"; google_ad_width = 234; google_ad_height = 60; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td></tr></table> </div> </div> </div> <div id="footer"> © 2007 Mesquite Country Christmas <br /> <br /> <script type="text/javascript"><!-- google_ad_client = "pub-8048181801684156"; //468x60, created 1/8/08 google_ad_slot = "0360766123"; google_ad_width = 468; google_ad_height = 60; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> </body> </html> If anyone can help me with this that would be great! -Thanks Yesterday, someone on this forum helped me get a floating image to display correctly in my header: http://www.toddcary.com/pvrc/test1/header.html So, I though I was home free. Not so! I can't get a <div id="content"> tag to work correctly with the "header divisions": http://www.toddcary.com/pvrc/test1/header1.html First, I do not understand why the right and left are not 100% width. Secondly, if I try to add a left column, the logo.gif sets the left position for the column! http://www.toddcary.com/pvrc/test1/header2.html As you can deduce, I am trying to move into using divisions rather than tables with some difficulty. Any help is GREATLY appreciated! Todd I believe the problem is that the fact that the pictures are using an absolute position. Not sure though. I have tried about 4 or 5 different thing to fix this to no avail. I will copy in the code for you to see. I do not have this running on a server for everyone to load but it is not much code. Any help would be greatly appreciated. Thansk, Dano HTML Code: <html> <head> <title>Official Site of Premier Security Group, Inc.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .centerContainer { margin: 0 auto; } body { background-image:url(images/bkgd2.png) } #Table_01 { position:absolute; left:0px; top:0px; width:800px; height:1200px; } #PSindex-01 { position:absolute; left:0px; top:0px; width:800px; height:69px; } #PSindex-02 { position:absolute; left:0px; top:69px; width:20px; height:174px; } #PSindex-03 { position:absolute; left:20px; top:69px; width:760px; height:174px; } #PSindex-04 { position:absolute; left:780px; top:69px; width:20px; height:174px; } #PSindex-05 { position:absolute; left:0px; top:243px; width:800px; height:13px; } #PSindex-06 { position:absolute; left:0px; top:256px; width:20px; height:35px; } #PSindex-07 { position:absolute; left:20px; top:256px; width:126px; height:35px; } #PSindex-08 { position:absolute; left:146px; top:256px; width:129px; height:35px; } #PSindex-09 { position:absolute; left:275px; top:256px; width:125px; height:35px; } #PSindex-10 { position:absolute; left:400px; top:256px; width:1px; height:944px; } #PSindex-11 { position:absolute; left:401px; top:256px; width:123px; height:35px; } #PSindex-12 { position:absolute; left:524px; top:256px; width:130px; height:35px; } #PSindex-13 { position:absolute; left:654px; top:256px; width:126px; height:35px; } #PSindex-14 { position:absolute; left:780px; top:256px; width:20px; height:35px; } #PSindex-15 { position:absolute; left:0px; top:291px; width:400px; height:909px; } #PSindex-16 { position:absolute; left:401px; top:291px; width:399px; height:909px; } </style> </head> <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"> <div class="centerContainer"> <div> <div id="Table_01"> <div id="PSindex-01"> <img src="images/PSindex_01.png" width="800" height="69" alt=""> </div> <div id="PSindex-02"> <img src="images/PSindex_02.png" width="20" height="174" alt=""> </div> <div id="PSindex-03"> <img src="images/PSindex_03.png" width="760" height="174" alt=""> </div> <div id="PSindex-04"> <img src="images/PSindex_04.png" width="20" height="174" alt=""> </div> <div id="PSindex-05"> <img src="images/PSindex_05.png" width="800" height="13" alt=""> </div> <div id="PSindex-06"> <img src="images/PSindex_06.png" width="20" height="35" alt=""> </div> <div id="PSindex-07"> <img src="images/PSindex_07.png" width="126" height="35" alt=""> </div> <div id="PSindex-08"> <img src="images/PSindex_08.png" width="129" height="35" alt=""> </div> <div id="PSindex-09"> <img src="images/PSindex_09.png" width="125" height="35" alt=""> </div> <div id="PSindex-10"> <img src="images/PSindex_10.png" width="1" height="944" alt=""> </div> <div id="PSindex-11"> <img src="images/PSindex_11.png" width="123" height="35" alt=""> </div> <div id="PSindex-12"> <img src="images/PSindex_12.png" width="130" height="35" alt=""> </div> <div id="PSindex-13"> <img src="images/PSindex_13.png" width="126" height="35" alt=""> </div> <div id="PSindex-14"> <img src="images/PSindex_14.png" width="20" height="35" alt=""> </div> <div id="PSindex-15"> <img src="images/PSindex_15.png" width="400" height="909" alt=""> </div> <div id="PSindex-16"> <img src="images/PSindex_16.png" width="399" height="909" alt=""> </div> </div> </div> </div> </body> </html> Hi, I have problem with XHTML CSS vertical align middle. It works with Firefox but not with IE6. Many people has IE6 still so I need to get it to work. HTML Code: <div style="height: 128px;">text</div> How would I middle vertical align the text? HTML Code: <div id="table_small"><div id="table_vm">Special Offer</div></div> HTML Code: #table_small { background-image: url('images/table.jpg'); width: 128px; height: 22px; border: 1px solid #5a5a5a; font-family: Verdana; font-size: 10px; color: #e0e0e0; text-align: center; display: table; } #table_vm { display: table-cell; vertical-align: middle; } Hi all, I have a simple table: Code: <table cellspacing="0" cellpadding="0"> <tr> <td colspan="3" rowspan="3">MAIN CONTENT</td> <td>fixed</td> </tr> <tr> <td>expandable</td> </tr> <tr> <td>fixed</td> </tr> <tr> <td>fixed</td> <td>expandable</td> <td>fixed</td> <td>fixed</td> </tr> </table> The 2 expandable tds need to expand / contract depending on the height and width of the main content cell (as they will have repeating backgrounds) When I try this it is always the other columns that expand or contract. (BTW, this is all for a shadow border for different image sizes) Anyone know how I can achieve this? Thanks! Is there a way so that when you click a link, it will push everything below it down and show what they requested to see. I am planning on this for suggestions and help without users needing to re-load the page. Thanks. Sean How do I expand the tables here at http://www.ultdmovies.com. What would I change, and be specific, to make it a certain size in pixels, or full screen. I'm working on a website and I'm running into a problem with the left side cells. http://www.kbrmarketing.com/kbrnew/pages/problem.html If you look at the side on FF (3) is looks correct, but when you look at in in IE (i'm using 7) it's gets stretched out. I want only the bottom cell to expand as the page gets longer. Here's some pictures to help explain < IE < FF I just inserted those line breaks to extend the page to show you guys the problem. Eventually those breaks will be replaced with text and pictures. (the <br>'s are in the right cell, which causes the left cells to then expand) Hi How do you create a list that when you hover over it expands. As you can tell I'm new to HTMl. Thanks Bob v Hey i'm back and as idiotic as ever Ok when i over fill the tables they obviously expand but it destorys my template how can i make the images replicate or expand or whatever would be best, all help is good. Cheers EDIT: forgot to provide template link here Good afternoon. I am hoping someone can help. I've used tables to create the layout of my website (www.bongoscribbler.com) and I'm linking to a php script for the blog which essentially inserts blog.php into the middle cell. I want the cell to expand downwards so that scroll bars aren't necessary. It does this when viewing it on the iPhone or on the iPad but when viewing using Safari, IE and Firefox on the PC the cell doesn't expand downwards, but rather it stays the same size and scroll bars appear. If I disable the scroll bars, the cell still doesn't expand downwards to fit in all the content but the additional content is just outside the view of the cell. Does this make sense? Perhaps if you take a look at the site and click "read more" you'll see what I mean. <tr> <th background="pictures/s_image11_6.gif" width="141" height="683" border="0"></th> <th background="pictures/s_image11_7.gif" ALT="Main" width="777" height="683" border="0"> <iframe src="http://www.bongoscribbler.com/cgi-bin/preview.php" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe> </th> <th background="pictures/s_image11_8.gif" width="82" height="683" border="0"></th> </tr> Does anyone know what attributes I need to give the cell/table to get it to expand downwards? I'll be very grateful for any help. Thanks a lot Tom wanted to get an effect like this: http://www.azeotek.com/product_p/hg-m2.htm as you can see when you scroll over the image it has an expanded view. obviously it's some sort of java or code i have no idea how to do.. suggestions? I need help Im tryng to create my webpage so that there are no scroll bars on the right or bottom. I want the content to fit right on screen without the need to scroll to view more content. But my problem is, my page is not even filled up yet, i only have my navigation on top plus my table in the center. my table width is "100" and height="50". its small on the page but everytime i expand it abit more, it makes the entire webpage bigger then the scroll bars start appearing. Im tryna make a page that fits right on screen without need to scroll. Is there a code to fix this. ?/ I am looking for a code that when you click a link, it expands an area below it with out reloading the page or switching pages. I have seen it before, just click a link and it pops open a invisible box of (whatever) information you want, click the link again and the box turns invisible again. Sorry if I am not explaining this correctly. |