Dynamic AJAX content Problem

**jjahastings** · 04-11-2007, 02:49 AM

1) Script Title: Dynamic AJAX content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem:
I have a two columed fluid layout which uses this script to load HTML files into the main div from the left hand side menu div. However, whenever the content of the main div fills 100% of the area some problems occur the entire content of the HTML file (after the element which fills 100% of the div) is forced to below left column

I noticed that in IE6 this happens to the Dynamic Drive Script example when you resize the window.

I am not sure how to go about stopping this, but any help is appreciated!

**thetestingsite** · 04-11-2007, 02:53 AM

When viewing the demo in your problem browser, do you experience the same issue? If not, then a link to your problem page would be useful.

**jjahastings** · 04-11-2007, 03:08 AM

Well the problem code is just a generic 2 column plus header fluid layout. I have deleted the javascript which drives the AJAX as it is DD code anyway. Also scaled the menu down to one example link. In reality it has more.

HTML 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">

<head>
<title>Welcome to the Conferencing HK Internal Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 

<style type="text/css" media="screen">
html, body {
margin:0;
padding:0;
border:0;
height:100%;
}

/* Link Formatting */
a:link {color: #666666; text-decoration: underline; }
a:active {color: #CC0000; text-decoration: underline; }
a:visited {color: #222222; text-decoration: underline; }
a:hover {color: #CC0000; text-decoration: none; }
/* Text Formatting*/
h2           { color: #CC0000; font-size: 13pt; font-weight: bold }
body         { font-size: 9pt; font-family:Arial }
h1           { font-size: 14pt; text-decoration: underline; font-weight: bold }
a            { font-size: 10pt; color: #666666; text-decoration: underline }

#header {
	background: #000000;
}
#header2 {
	background: #CC0000;
}

#wrapper {
	background: #000000;
}

#main {
	margin-left: 210px;
	margin-top: 5px;
	margin-right: 5px;
}
#left {
	width: 150px;
	float: left;
	border: 1px solid #c0c0c0;
	margin-top: 5px;
	margin-left: 3px;
}


}
h1 {
	margin-top: 0;
}
.last {
	margin-bottom: 0;
}
.clearing {
	height: 0;
	clear: both;
}
</style>
</head>

<body>

<div id="wrapper"></div>

<div id="header">&nbsp;<p>&nbsp;</p>
	<p>&nbsp;</div>

<div id="header2">&nbsp;</div>

<div id="content" style="width: 100%; height: 100%">

<div id="left" style="width: 200px; height: 476px">
  <table border="0" width="200" align="center">
    <tr>
    <td width="80%" bgcolor="#E6E6E6" align="left"><b>
        <p><font face="Arial" size="2">Main Menu</font></td>
        <tr>
        <td width="79%" align="left">
           <b><a href="javascript:ajaxpage
                ('home.htm','main');">Home</a>
           </b>
        </td>
        </tr>
    </td>
    </tr>
</table>
</div>

<div id="main">

</div>
</div>
</div>
</body>
</html>

**thetestingsite** · 04-11-2007, 03:14 AM

The only thing that I could see it to be is the CSS styling for #main. Try commenting this out and see if it fixes it.
Hope this helps.

**jjahastings** · 04-11-2007, 03:23 AM

Hrm, commenting it out just led to the entire page appearing below the left hand column and aligned left (as opposed to below the left column but . It seems that an object that fills the entire home.html page triggers this to happen. In the full version I have pages without content which fills the page and those pages don't have this problem. However, pages with, say, a table set at 100% width, or even text that requires wrapping all of the content gets forced to the bottom. I am certain it is a CSS issue but I just noticed it happen with the Dynamic Drive example as well hence posting the question here.

**jjahastings** · 04-11-2007, 03:29 AM

Okay...I'm an idiot. I had not set the main div to float.

Thanks for pointing out the CSS of the main element though, turned out to be the key in the end!

Thread: Dynamic AJAX content Problem

Thread Tools

Search Thread

Dynamic AJAX content Problem

Bookmarks

Bookmarks

Posting Permissions