tags:

views:

107

answers:

1
+1  Q: 

Using CSS how do you move text down when a floated image is above a certain width?

I have a text block with an image floated left. The images can be of variable width. If the image is say greater than 2/3 the width of the block I want the text to drop down below the image but if not I want it beside the image.

All of this is in Drupal if that matters.

+1  A: 

I'd think you could put the text in a div with float:left . . . and make the width of the div be 1/3 the width of the containing block. That way you could be sure you wouldn't have an image of > 2/3 the width of the block next to it.

Tim Goodman  2010-03-19 23:55:38
Of course, then the text won't wrap *around* your image, it will just appear next to it in a block if there's room, and below it otherwise. But it sounds like that's what you want.
Tim Goodman  2010-03-19 23:56:58
Yes but if the image is less than 2/3 width then the text is only going to be 1/3 width and of course, as you say it won't wrap around.
Peter Kelley  2010-03-21 06:22:47
Yes, perhaps it'd be better to set the `min-width` of the text block to 1/3, so that it could be larger than that but no smaller. However, if you don't want the text in its own block but rather wrapping around the image, then I can't think of a way to do it with pure CSS ... however you could use JavaScript to get the width of the image, and reposition things accordingly.
Tim Goodman  2010-03-21 15:35:16

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?