HTML Newbie needs simple help, floating and javascript configuration

Hi there,

Im very very new to coding, but i think i have a fairly good grasp on HTML. Im pretty sure these issues are just quick fixes / solutions, but thank you in advance.

http://rileyswingle.com/kk/index.html

<div id="content">
<div id="leftcontent">

<div id="contentleft1">
<img src="images/keandiff.png" />
<p>Text for The Keane Difference goes here</p>
</div>

<div id="contentleft2">
<img src="images/service2meet.png" />
<p>Text for service to meet your unique needs goes here</p>
</div>

<div id="contentright1">
<img src="images/certific.png" />
<img src="#" />
</div>


</div>


#content p {font-size:10px;
width:900px;
height:auto;
}

#contentleft1{padding-left:42px;
padding-top:30px;
width:370px;
height:inherit;
float:left;
}
#contentleft2{padding-left:42px;
width:370px;
height:auto;
}
#contentright1{
width:300px;
height:inherit;
float:right;
}


I cannot seem to find out how to get these divs to float correctly. I wish to have the "Certifications" div to be within the lower content div (that div is below the menu), but whenever i try to float the other two divs, they just do funky things like come out of the div and removes the background white color and the image comes through.

Also, i wish to put in a javascript slideshow with or without clickable links, whichever is easier. I had downloaded a .js called CrossSlide (http://tobia.github.com/CrossSlide/), but i dont know where to put the following code to configure it. It seems like an easy enough procedure, but i cant ever find any real quick answer to it.

$('#placeholder').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: 'sand-castle.jpeg' },
{ src: 'sunflower.jpeg' },
{ src: 'flip-flops.jpeg' },
{ src: 'rubber-ring.jpeg' }
]);

Thanks for your help in advance!

-Riley

use clearfix


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


A good starter way to clear floats.

Here's how you use it:


<div class="clearfix">
<div class="difference" style="float: left; width: 450px;">

</div>
<div class="certificates" style="float: left; width: 450px;">

</div>


the correct way is to set a height for the "container" of the two divs your floating, but clearfix will work regardless. notice how the "difference" and "certificates" divs equal to 900 width (which is the width of your container).

Simply set following code to parent DIV of floated elements. It will work in all browsers:


#parent_div {
width:900px; /*width should be according to child floated elements */
height:1%;
overflow:auto;
}

or you could try adding in the missing "</div>" tag for the left content area

good catch. but regardless he's gonna have to clear his float one way or another :)