• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 320
  • Last Modified:

Image refuses to float left

With the kind permission of David Shea we are adopting some of his design and CSS.... in the <div id="preamble"> on some new pages, we are running both an image and text.. the image is supposed to float left. and the text should flow to the right.

e.g. of how it works correctly can be seen at


In this case the image floats left i.e. it appears in the center of the  spread between the pullquote on the left and the text on the right...

Now, I have taken that same DOM and simplified it by a *lot* and implemented it for other pages on the same site, but with a different CSS style sheet:

example here:


Now, despite the CSS rule

#preamble img {
     float: left;
     margin: 10px 12px 0px 0px;

being the same in both... in the latter the image refuses to float left, instead it seems to act as if it were styled to floar right..

Can anyone solve this mystery?


#preamble img

  • 5
  • 2
1 Solution
It is because your QUICKSUMMARY has:
clear: both;

in it.
Which will push the image to the right of it.
remove that!
I also noticed your stylesheet gets loaded twice I think ??
Well firefox seems to think so :S

Also you will need to remove the:
float: left from the QUICKSUMMARY otherwise it will still be next to the quicksummary...

A BETTER solution
would be to have the QUICKSUMMARY AFTER the IMAGE.
in the HTML...
and have the FLOAT:LEFT too...
SivakatirswamiAuthor Commented:
Ummm ...gee ... wasn't I clear?

e.g. of how it works *correctly* can be seen at


displays the way we want it to... picture is in the middle.. the CSS for this page *has* the clear:both; rule...



is the page that is not working as wanted.  it does not have the clear both... perhaps it should...

#quickSummary {
      margin: 0px 20px 20px 10px;
      width: 160px;
      float: left;

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Hey Sivakatirswami...
Sorry i didnt understand what you meant...

I dont see any problems on the pages...

The images are in the middle on both of them...????
I'm with neester... Both examples (good and 'bad') displays fine here under WinXP ie6.0, firefox and opera. Resized like crazy and no difference, the picture appears between the pullquote and the introductory paragraph.

What browser and what server do you use?  Or is it in a generator's preview screen (frontpage, Dreamweaver, ...) that it's going pear shaped?
Thats why i was confused about your question.
Because I didnt notice anything wrong???

SivakatirswamiAuthor Commented:
Right, I found the problem and fixed it shortly afer neester's first post.   our fire wall here block internet access outside office  hours, so I was only able to post this morning... turns out it was a very dumb error on my part...

I had a second

preamble img {
  float: right

farther down the style sheet that got in there during early editing and was never removed.


I don't know what the policy is, but no reasons not to give points for those  who took the trouble to respond
Thanks ;)
It is good to see you worked it out in good time.
I hate problems like that - I spent about 1 hour working a script I wrote before realising I was working a backup, and uploading the backup.
But testing the current page...
Never realising that it wasnt actually updating...

Glad to see it worked and thnx for the points.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now