Float left - floating right at certain page widths

A number of pages on my site, including this one: www.literacysolutions.com.au/resources2/mind-maps.php
have a series of images (shown under the heading 'Sample Pages'), which are floated left. At most screen widths they float left as expected. However at some screen widths when the series of images wraps, the bottom row of images floats right. The top row appears to float left.

When this happens I have queried the code in the browser (Chrome & FF) and it confirms the styling is Float: left;

Would really appreciate any thoughts about what may be going on here and how to resolve this.

Trouble understanding floats

The html5 media is in a div that floats right.
The image is in a figure node that floats left.

The h2 header, paragraph, and table are in another div that doesn't have float instructions.

It does what I want, with the last div mentioned displaying below the audio, until I shrink the image horizontally. Then that last div gets visually split up with the header ans paragraph above the paragraph and the table below the media.

I don't understand why it does this since they are all grouped together in a div but it is consistent across browsers.

Doing the right thing:

Horizontal alignment of few div's inside centered container

Hi, I need some help and I hope the solution is simple for professionals.
The task is distribution of some layers inside the container.
The trouble is that the border between first right .pic_text is bigger than between first left .pic_text. The container .center is centered, but its content doesn't have equal margins.
I tried to find the solution, but couldn't find it ( for my case.
The matter is that every .pic_text has to have picture and text and the design has to be adaptive.

Here is my code CSS3:

<style>
  .center {
	width: 95%; 
	height: auto;
	padding: 10px; 

Tricky Problem With DIV Float - Help me

Hi All,

I am basically from .NET developer background. I got a problem while designing a TICKET (used in casino's). I am posting the outline HTML of my problem, some one help me to sort it out.

<div style="width: 210px;position:absolute">
<div id="barCode" style="background:yellow"">
 B&nbsp
 BARCODE IMAGE
</div>
<div style="width: 100px;position:absolute;height:100px;background:magenta; top:25px;-webkit-transform: rotate(-270deg);">DIV 1</div>

odd layout using divs and CSS

Hey All,

I'm trying to make a table of rows and columns using divs.

I've got this on my page:

Syndicate content