Same Old Topic - Flow Text to Left Side of Float Right Image (slide show)

HTML & CSS
1

My html page . . .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>City Value Charts &amp; Information - Properties With Style, Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<meta name="description" content="Rick Schreiber, Properties With Style, home values, real estate analysis, statistical analysis, median sales prices, average sale prices, historical real estate values, oceanfront homes, bayfront homes, local real estate broker, local real estate agent, local real estate office, pricing real estate, real estate values, luxury homes, upscale homes, orange county  short sales, foreclosure, REO, real estate content, determining market value, Listing and Selling South Orange County Real Estate, Aliso Viejo, Corona del Mar, Coto de Caza, Dana Point, Huntington Beach, Irvine, Laguna Beach, Laguna Hills, Laguna Niguel, Newport Beach, Newport Coast, Rancho Santa Margarita, San Clemente, San Juan Capistrano "/>
<link type="text/css" rel="stylesheet" href="css/homepage.css" media="screen,projection,tv"/>
<!--picture program starts here-->
<script type="text/javascript">
<!--loads pics in cache-->
var image1=new Image()
image1.src="/css/images/lnviewestate.jpg"
var image2=new Image()
image2.src="/css/images/sjpalmestate.jpg"
var image3=new Image()
image3.src="/css/images/rrhighlands.jpg"
var image4=new Image()
image4.src="/css/images/rrcurvedstreet.jpg"
var image5=new Image()
image5.src="/css/images/rrpalm.jpg"
var image6=new Image()
image6.src="/css/images/hbwaterfront.jpg"
var image7=new Image()
image7.src="/css/images/hbcottage.jpg"
var image8=new Image()
image8.src="/css/images/laderarnch.jpg"
var image9=new Image()
image9.src="/css/images/ldbeachfire.jpg"
var image10=new Image()
image10.src="/css/images/ldcolonial.jpg"
var image11=new Image()
image11.src="/css/images/nbranch.jpg"
var image12=new Image()
image12.src="/css/images/nptpier.jpg"
var image13=new Image()
image13.src="/css/images/lnrockestate.jpg"
var image14=new Image()
image14.src="/css/images/lnflowerhouse.jpg"
var image15=new Image()
image15.src="/css/images/sjstucco.jpg"
var image16=new Image()
image16.src="/css/images/cotoredtree.jpg"
var image17=new Image()
image17.src="/css/images/rrhilltop.jpg"
var image18=new Image()
image18.src="/css/images/hbwaterfront1.jpg"
var image19=new Image()
image19.src="/css/images/hbcondos.jpg"
var image20=new Image()
image20.src="/css/images/rsmcondoslake.jpg"
var image21=new Image()
image21.src="/css/images/ld3302.jpg"
var image22=new Image()
image22.src="/css/images/ld3254.jpg"
var image23=new Image()
image23.src="/css/images/turningbasin.jpg"
var image24=new Image()
image24.src="/css/images/lnlapstrake.jpg"
var image25=new Image()
image25.src="/css/images/sjlongdrive.jpg"
var image26=new Image()
image26.src="/css/images/hbmainstreetpier.jpg"
var image27=new Image()
image27.src="/css/images/bayfront.jpg"
var image28=new Image()
image28.src="/css/images/monarchpointviews.jpg"
var image29=new Image()
image29.src="/css/images/lnfog.jpg"
var image30=new Image()
image30.src="/css/images/lightedhouse.jpg"
var image31=new Image()
image31.src="/css/images/viewtocdm.jpg"
var image32=new Image()
image32.src="/css/images/nbboatdock.jpg"
  </script>
</head>
<body>
	<div class="header">
		<img src="css/images/rsmdining.jpg" name="slide" width="470" height="250" alt="picture slide show"/>
    </div>
<script type="text/javascript">
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<32)//must represent No. of pictures in above cache NOT the header picture!//
step++
else
step=1
//call function "slideit()" every 6 seconds
setTimeout("slideit()",6500)
}
slideit()
</script>
<!-- here is where the main menu and the rest of the page code goes-->
<div id="nav">
  <ul id="navli">
    <li><a href="http://www.propertieswithstyle.com/avdata.html" title="Aliso Viejo">Aliso Viejo</a></li>
    <li><a href="http://www.propertieswithstyle.com/cdmdata.html" title="Corona del Mar">Corona del Mar</a></li>
    <li><a href="http://www.propertieswithstyle.com/cdcdata.html" title="Coto de Caza">Coto de Caza</a></li>
    <li><a href="http://www.propertieswithstyle.com/dpdata.html" title="Dana Point">Dana Point</a></li>
    <li><a href="http://www.propertieswithstyle.com/hbdata.html" title="Huntington Beach">Huntington Beach</a></li>
    <li><a href="http://www.propertieswithstyle.com/ladata.html" title="Irvine">Irvine</a></li>
    <li><a href="http://www.propertieswithstyle.com/ladata.html" title="Ladera Ranch">Ladera Ranch</a></li>
    <li><a href="http://www.propertieswithstyle.com/lbdata.html" title="Laguna Beach">Laguna Beach</a></li>
    <li><a href="http://www.propertieswithstyle.com/laghdata.html" title="Laguna Hills">Laguna Hills</a></li>
    <li><a href="http://www.propertieswithstyle.com/lndata.html" title="Laguna Niguel">Laguna Niguel</a></li>
    <li><a href="http://www.propertieswithstyle.com/nbdata.html" title="Newport Beach">Newport Beach</a></li>
    <li><a href="http://www.propertieswithstyle.com/ncdata.html" title="Newport Coast">Newport Coast</a></li>
    <li><a href="http://www.propertieswithstyle.com/rsmdata.html" title="Rancho Santa Margarita">Rancho Santa Margarita</a></li>
    <li><a href="http://www.propertieswithstyle.com/scdata.html" title="San Clemente">San Clemente</a></li>
    <li><a href="http://www.propertieswithstyle.com/sjdata.html" title="San Juan Capistrano">San Juan Capistrano</a></li>
    <li><a href="http://www.propertieswithstyle.com" title="HOME PAGE">Return Our To Home Page</a></li>
  </ul>
</div>
<!--eND of Nav-->
<div id="maincontent">
  <div class="desc">The Cities/Area list at left is our primary focus. Each of these pages will provide you with local home and area pictures, macro &amp; micro valuation charts, 13 year median sale chart and a 11 year rental chart. The macro and micro charts provide you with instant dollars ranges based on home square feet scale on the bottom of the chart. If you haven't looked at the <em>Start Here - Insight On Market Value</em> page this will give you an idea of things to look for.
This provides you with an excellent starting point when you're looking to sell or purchase a home in any of these areas. The slide show above is comprised of pictures from all of these areas.<br /> If you would like us to prepare a similar chart for your home or the home you are looking to purchase please contact us at: <a class="test" href="mailto:propertieswithstyle@gmail.com"><span class="email">Properties With Style.</span></a>
</div>
  <div id="footer">
    <hr />
    Properties With Style Inc., a Real Estate Corporation&copy;. The information being provided by CARETS (CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS, and/or VCRDS) is for the visitor's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties visitor may be interested in purchasing.

    Any information relating to a property referenced on this web site comes from the Internet Data Exchange (IDX) program of CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site.

    The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals. The data contained herein is copyrighted by CARETS, CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS and/or VCRDS and is protected by all applicable copyright laws. Any dissemination of this information is in violation of copyright laws and is strictly prohibited.

    CARETS, California Real Estate Technology Services, is a consolidated MLS property listing data feed comprised of CLAW (Combined LA/Westside MLS), CRISNet MLS (Southland Regional AOR), DAMLS (Desert Area MLS),CRMLS (California Regional MLS), i-Tech MLS (Glendale AOR/Pasadena Foothills AOR) and VCRDS (Ventura County Regional Data Share).
    Information of sellers and others have not been verified. Data maintained by the Associations or their MLS may not reflect all activity in the market. DRE License: 01408382.
    <hr />
  </div>
  <!-- eND Footer-->
</div>
<!-- eND Maincontent-->
</body>
</html>
<!--2/09/2012-->

The slide show needs to be above the </head> and <body> section of the page.

I’m trying to understand how to place all #maincontent correctly and float the text to the left and then UNDER the slide show picture within the #maincontent div.

My menu cannot be under the #maincontent as it is a float left item.

Any ideas?

Thanks . . . Rick

2

As usual, a link to the page in question would be most helpful. Failing that, we at least need the CSS to go with the above HTML.

3

Silly me . . .

http://www.propertieswithstyle.com/citysnapshots.html

4

If I’ve understood you correctly, you want the text to flow around the slideshow.

Move your header div from here:

[COLOR="#FF0000"]<body>[/COLOR]
<div class="header">
		<img src="css/images/rsmdining.jpg" name="slide" width="470" height="250" alt="picture slide show"/>
    </div>
[COLOR="#FF0000"]<script type="text/javascript">[/COLOR]

to here:

[COLOR="#FF0000"]<div id="maincontent">[/COLOR]
<div class="header">
		<img src="citysnapshots_files/rrpalm.jpg" name="slide" alt="picture slide show" height="250" width="470">
    </div>
  [COLOR="#FF0000"]<div class="desc">The Cities/Area list at left is our primary focus.[/COLOR]

It needs to be inside the same container as the text you want to flow round it.

5

Whoa!

That really worked well - perfectly actually.

Thanks much TechnoBear

6

Glad I could help. :slight_smile:

7

TechnoBear - I spoke to soon.

This change somehow prevents the slide show from working.

Just the header picture shows on the page. the slide show does not start now.

Ideas . . . ?

thanks . . . Rick

8

Corrected . . .

I moved my ,menu up to the top of the html page under the <link type= . . . etc.>

Under the menu I placed the <div id=“maincontent”>

Under that the slide show begins . . .

then the header picture which starts the main slideshow

then the rest of the page content.

It all flows well now.

Thanks for you assistance.

Rick

9