Why aren't my floats lining up? - css

Question

I've been staring at this problem for awhile now, and I was hoping someone on here could steer me in the right direction
For some reason I can't get my floats to line up the way i want them to! I managed to get the movie to the right, but when I want the two floated columns of reviewer's quotes to be up there right next to it.
Here's my CSS Code that deals with the picture and the columns
.overview { /* The picture */
display:block;
float:right;
background-color: #A2B964;
}
.column1{
clear: left;
width: 31%;
margin-left: 2%;
margin-right: 1%;
}
.column2{
clear: left;
width: 31%;
margin-left: 1%;
margin-right: 2%;
}
Here is the HTML for the picture:
<div class = "overview">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/overview.png" alt="general overview" />
</div>
And the HTML for the columns:
<div class = "column1">
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
Peter Debruge <br />
<em>Variety</em>
</p>
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/fresh.gif" alt="Fresh" style="float:left;padding:5px;"/>
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
Todd Gilchrist <br />
<em>IGN Movies</em>
</p>
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
<q>It stinks!</q>
<br />
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
Jay Sherman (unemployed)
</p>
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left; padding:5px;"/>
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
Joshua Tyler <br />
<em>CinemaBlend.com</em>
</p>
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
<q>YOUR REVIEW HERE</q>
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
NAME <br />
<em>PUBLICATION</em>
</p>
</div>
<div class = "column2">
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
Jeannette Catsoulis <br />
<em>New York Times</em>
</p>
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
Ed Gonzalez <br />
<em>Slant Magazine</em>
</p>
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/fresh.gif" alt="Fresh" style="float:left;padding:5px;"/>
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
Mark Palermo <br />
<em>Coast (Halifax, Nova Scotia)</em>
</p>
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
Steve Rhodes <br />
<em>Internet Reviews</em>
</p>
<p class = "quotebox">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/rotten.gif" alt="Rotten" style="float:left;padding:5px;"/>
<q>YOUR REVIEW HERE</q>
</p>
<p class = "reviewer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/2/critic.gif" alt="Critic" style="float:left;padding:5px;"/>
NAME <br />
<em>PUBLICATION</em>
</p>
</div>
And for reference, as well as to clarify my question, the output it supposed to look like this: http://courses.cs.washington.edu/courses/cse190m/12sp/homework/2/output/out-wide.png
So can anyone see why my floated columns aren't sitting beside the TMNT logo?

Answer 1

Alright, heres what I did: http://jsfiddle.net/PR3un/
<div class = "overview">
<img ... />
<dl>...</dl>
</div>
The only differences I did were...
Removed the clear:both,
Moved your dl into your ".overview" div
Removed the overview class from your dl
Floats are tricky. My favorite analogy that I tell my coworkers is this:
Using floats is like traveling through hyperspace. They exist, kinda, and can impact other DOM elements... but they are also travelling at a different dimensional plane (left-right). To bridge the float hyperspace travel, you can apply clear:both on itself or overflow:hidden on its parent.
... And if you apply float on a floating element's parent, it can provide a self-clear, but then the parent is traveling through hyperspace too.