Solved

Image refuses to float left

Posted on 2004-10-18
8
312 Views
Last Modified: 2012-06-21
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

http://www.himalayanacademy.com/taka/

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:

http://www.himalayanacademy.com/resources/ 

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?

Thanks
Sivakatirswami

#preamble img


0
Comment
Question by:Sivakatirswami
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 
LVL 11

Expert Comment

by:neester
ID: 12344481
Hey,
It is because your QUICKSUMMARY has:
clear: both;

in it.
Which will push the image to the right of it.
remove that!
0
 
LVL 11

Expert Comment

by:neester
ID: 12344492
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...
0
 

Author Comment

by:Sivakatirswami
ID: 12344559
Ummm ...gee ... wasn't I clear?

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

http://www.himalayanacademy.com/taka/

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

but

http://www.himalayanacademy.com/resources/

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;
}



0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:neester
ID: 12344683
Hey Sivakatirswami...
Sorry i didnt understand what you meant...

I dont see any problems on the pages...
:S

The images are in the middle on both of them...????
0
 
LVL 3

Expert Comment

by:PaulPosition
ID: 12348141
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?
0
 
LVL 11

Accepted Solution

by:
neester earned 500 total points
ID: 12348452
Thats why i was confused about your question.
Because I didnt notice anything wrong???
lol

:)
0
 

Author Comment

by:Sivakatirswami
ID: 12350810
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.

duh!

I don't know what the policy is, but no reasons not to give points for those  who took the trouble to respond
0
 
LVL 11

Expert Comment

by:neester
ID: 12352799
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.
0

Featured Post

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to get CSS styled menu to maintain the open selected menu? 13 55
CSS Style Effect 2 23
BG appearing and then disappaear after a second 8 62
toggle content 12 41
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question