1 reply [Last post]
fishman882
Offline
newbie
USA
Last seen: 12 years 22 weeks ago
USA
Timezone: GMT-7
Joined: 2009-11-21
Posts: 2
Points: 3

Hi,
My site container is 1024 px wide and I'm trying to position a 728 X 90 AdSense image (Java Script) and an image I created (296 X 90 JPG ) to run next to the leader board image on the same line. The desired end result would be a smooth 1024 X 90 set of images acrossthe top of the screen (see attachment). I've tested it on Firefox for Mac and windows, Chrome, Safari, and IE 7. The 296 X 90 image drops down to the next line, running under the AdSense leader board instead of next to it on the right. Here is my website: www.datravelmagazine.com/TEST.html

I'm not sure why the body background is not showing? I put this page together for this question so I won't worry about the background color here.

I've also tried to float the small image to the right, then the ad code to the left, but it didn't get it onto 1 line for me.

I have been looking for a solution to this for a couple of weeks now. Any help you can give me will be very much appreciated.
(I hope I'm not posting too code here.)
Thanks!

Here is my XHTML and CSS document ( I combined the HTML and CSS for this post ):

<!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>Destination America Travel - Suggest A Spot</title>
<meta name="Keywords" content="destination america, travel, city guides, travel america, road trip, suggest a spot, suggestions, feature destinations, camping, national parks, RVing" /><meta/>
<meta name="Description"
content="Travel magazine featuring popular North American travel destinations. Feature destinations include Popular and off the beaten path cities &amp; towns, National Parks, and other attractions."/><meta/>
 
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.thrColAbsHdr #sidebar1 { width: 180px; }
.thrColAbsHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
 
 
<style type="text/css">
@charset "UTF-8";
 
body  {
	font: 95% Verdana, Arial, Helvetica, sans-serif;
	background: #364A5C;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
 
a:link {
	color: blue;
}
a:visited {
	color: #333366;
}
a:focus {
	color: red;
}
a:hover {
	color: #5D9DFB;
}
 
 
 
 
.thrColAbsHdr #container { 
	position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
	width: 1024px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: none;
	text-align: left; /* this overrides the text-align: center on the body element. */
 
} 
 
 
#active {
	display: inline; 
}
 
.thrColAbsHdr #header { 
	height: 135px; /* if you're changing the source order of the columns, you'll may want to use a height on the header so that you can give the columns a predictable top value */
	background: #364A5C;
	background-position: left top;
	padding: 0 0px 0 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.thrColAbsHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	text-align: center;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 222%;
	font-style: normal;
	line-height: normal;
	color: #00B5EF;
}
/*Navbar CSS below*/
.thrColAbsHdr #navcontainer ul
{
	position: relative;/*This Pushes the navbar up to the base of the banner*/
	top: -17px;        /*This Pushes the navbar up to the base of the banner*/
	padding-left: 0;
	margin-left: 0;
	background-color: #FF6727;
	color: white;
	float: left;
	width: 100%;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	/*border: solid medium #7D3400;
	border-right: none;
	border-left: none;
	Border-top: none;  This put's a border around the navbar list*/
}
 
.thrColAbsHdr #navcontainer ul li { 
	display: inline; 
}
 
.thrColAbsHdr #navcontainer ul li a {
	padding: 0.2em 1em;
	background-color: #FF6727;
	color: white;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
	line-height: 22px; /*vertical height (thickness) of navbar*/
}
 
.thrColAbsHdr #navcontainer ul li a:hover {
	background-color: #C2411C;
	color: white; /*This is the FONT color on rollover*/
}
/*Navbar CSS above*/
 
 
 
.thrColAbsHdr #sidebar1 {
	position: absolute;
	top: 344px; /*this value pushes down the left side colum*/
	left: 0;
	width: 187px; /* Orig 187the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	/* the background color *REMOVED* will be displayed for the length of the content in the column, but no further */
	padding: 5px 5px 5px 8px; /* padding keeps the content of the div away from the edges */
}
.thrColAbsHdr #sidebar2 {
	position: absolute;
	top: 344px; /*this value pushes down the right side colum*/
	right: 3px;
	width: 193px; /* Orig 160 the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	/* the background color *REMOVED*will be displayed for the length of the content in the column, but no further */
	padding: 15px 5px 10px 5px; /* padding keeps the content of the div away from the edges */
	font-size: 95%;
}
.thrColAbsHdr #mainContent {
	margin: 0 210px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain orig 200. */
	padding: 0 5px;
	border-width: 2px; /*Main Content LH Border*/
	border-style: dotted;
	border-color: #FF6727;
	border-bottom: none;
	border-top: none;
	/*border-right: none; Uncomment to remove RH main content Border*/
}
.thrColAbsHdr #maincontent h2 {
	font-size: 180%;
	color: #364A5C;
}
.thrColAbsHdr #footer { 
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#E8D3AB;
} 
.thrColAbsHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	text-align: center;
	font-size: 90%;
}
.thrColAbsHdr #footer2 {
	border: dashed;
	border-color: #FF5810;
	border-left: none;
	border-right: none;
	}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
	padding: 12px 12px 12px 12px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
	padding: 12px 12px 12px 12px;
}
.thrColAbsHdr #container #sidebar2 h3 {
	font-size: 95%;
}
 
.fineprint {
	font-size: 50%;
}
.smalltext {
	font-size: 80%;
}
.thrColAbsHdr h1 {
	color: #C2411C;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-decoration: none;
}
.quickfact {
	color: #FFF;
	font-size: 70%;
}
.storytable {
	border-width: 1px; /*Main Content LH Border*/
	border-style: dotted;
	border-color: #FF6727;
	border-right: none;
	border-left: none;
	border-bottom: none;
	text-align: left;
}
.emph {
	font-style: italic /*Class for italics*/
}
 
.imgfltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
	border: 2px solid #000;
}
.imgfltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
	border: 2px solid #000;
}
.search {
	font-size: 75%;
	position: absolute; /* Moves search box to center of navbar*/
	top: .2em; /* Moves search box to center of navbar*/
	right: 0.8em;
}
.title {
	font-weight: bold;
	font-size: 125%;
	margin: 4px;
 
}
 
.headline {
	font-weight: bold;
	font-size: 180%;
	color: #FF6727;
	font: "Times New Roman", Times, serif;
 
}
.headline2 {
	font-weight: bold;
	font-size: 150%;
	color: #364A5C;
	font:"Times New Roman", Times, serif;
}
 
.ltbluetxt {
	color: #333;
}
 
.center {
	text-align: center;
}
 
.graytext {
	color: #666;
}
 
img {  
	border-style: none;
}
</style>
 
</head>
 
<body class="thrColAbsHdr">
 
<div id="container">
 
<script type="text/javascript"><!--
google_ad_client = "pub-4037561706697844";
/* 728x90, Leaderboard created 11/22/09 */
google_ad_slot = "4709894262";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<img src="images/296x90_DA_send_us_events.jpg" />
 
  <div id="header">
 
    <h1><a href="index.html"><img src="images/DestinationAmerica1024X135Banner.gif" alt="Destination America Travel Magazine banner" border="0" width="1024" height="135" align="top" /></a></h1>
 
      <div id="navcontainer">
 
  <ul id="navlist">
 
    <li id="active"><a href="http://www.datravelmagazine.com" id="current">Home</a></li>
	<li><a href="destinations.html">Destinations</a></li><!--MAKE DROP DOWN-->
    <li><a href="suggest.html">Suggest</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="regionalcalendar.html">Events</a></li>
    <!--<li><a href="http://datravelmagazine.com/forum">Forum</a></li>-->
    <li><!--Google Search-->
    <span class="search">
    <form method="get" action="http://www.google.com/search">
	<input type="text"   name="q" size="31" maxlength="255" value="" />
	<input type="submit" value="Google Search" />
	<input type="radio"  name="sitesearch" value="" />Web
	<input type="radio"  name="sitesearch" value="datravelmagazine.com" checked /> Destination America
	</form></span></li>
 
  </ul>
 
      </div>
	<!-- end #header -->
    </div>
 
  <div id="sidebar1">
 
 
    <h4>Up Next:</h4>
	<p>• San Francisco, CA<br />
	  <br />
	  <strong>What's Happening <br />
   	In Your Area?</strong></p>
<p><span class="smalltext">(Click on map)</span></p>
<!--USA Rollover Map Below-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="187" height="100">
    <param name="movie" value="USA_Rollover_Linked.swf"/>
    <!--[if !IE]>-->    
    <object type="application/x-shockwave-flash" data="USA_Rollover_Linked.swf" width="187" height="100">
 
    <!--<![endif]-->
 
        <p>Interactive USA Regional Map</p>
    <!--[if !IE]>-->    
    </object>
    <!--<![endif]-->
 
</object>
<!--END USA Rollover Map-->
<br />
<br />
 <!--Google AdSense Code-->
  <script type="text/javascript"><!--
google_ad_client = "pub-4037561706697844";
/* 160x600 Sidebar SkyScraper 11/22/09 */
google_ad_slot = "6496141862";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br />
<br />
<!--Add Social Media Below-->
 <a href="DestinationAmerica_rss.xml"><img src="images/feed-icon-28x28.png" width="28" height="28" alt="RSS 2.0" /></a> <!--RSS FEED-->
 
<!-- end #sidebar1 --></div>
<div id="sidebar2">
  <br />
  <!--Google AdSense Code-->
  <script type="text/javascript"><!--
google_ad_client = "pub-4037561706697844";
/* 160x600 SkyScraper_ImageOnly, created 11/22/09 */
google_ad_slot = "1847678003";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
  <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
 
 
  <!-- end #sidebar2 -->
</div>
  <div id="mainContent">
    <h1>Suggest A Spot</h1>
   		<p>Or give us your input about this site! </p>
   		<p>Suggestions, improvements, problems? </p>
   		<p>Please let us know. </p>
   		<p>Email: infoATdatravelmagazine.com</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
	  <!-- end #mainContent -->
  </div>
  <!--Closes footer2 div-->
  <div id="footer">
    <p><a href="about.html">About Us</a> | <a href="advertise.html">Advertise</a> | <a href="useragreement.html">User Agreement</a> | <a href="privacy.html">Privacy</a> | <a href="contact.html">Contact</a> | <a href="contribute.html">Contribute </a>| <a href="http://stats.justhost.com/track?c178b8a6ec2301738ca019a29a8216232" target="_blank">Just Host</a></p><br /><br />
</div></div> 
<!--Google Analytics Code-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9507438-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<!--Google Analytics Code-->
</body>
</html>

AttachmentSize
Ad_Placement_1.png2.2 KB
fishman882
Offline
newbie
USA
Last seen: 12 years 22 weeks ago
USA
Timezone: GMT-7
Joined: 2009-11-21
Posts: 2
Points: 3

New development

I guess my question isn't clear how it's worded? Ghost
Basically what I'm trying to do (simply stated) is display 2 image graphics inline.

The first image is generated by JavaScript. I don't know if this makes a difference?

I have got it working right on Firefox, Safari, & Chrome using

.leaderboard {
white-space: nowrap
}

But the 2nd. image still sits under the first image in IE (instead of next to it - inline).

Any thoughts on an IE fix?