CSS positoned floats

@lkeeneyAug 29.2014

I did a search on the Internet for “CSS positioned float” and found a page on the IE website which had a working example of a CSS positioned float. They had an image that you could drag around on a page of text, and the text floated around the image as the image was moved.

However, this example did not work on either a Firefox or Chrome browser. Is this something designed specifically for IE browsers, and not any other browser?

I don’t want a floated element which will be moved, but I would like to be able to place an image any place on the page and have the text wrap around it.

Does anyone have a link showing how to use this in all the different browsers?

to post a comment

CSS

13 Comments(s) _↴

@Code-tardAug 29.2014 — #Hey Larry,

Dude Im not sure what you're asking (maybe my fault)... With 179 posts I find it hard to believe you dont fully understand Float:left, right and when needed clear: both....

But just in case, here's a good tutorial explaining it.. you can then insert the image anywhere down the text not just the beginning.. and of course is stable across all... ?

[COLOR="#0000FF"]Youtube Tutorial[/COLOR]

@lkeeneyauthorAug 29.2014 — #Hey Larry,

Dude Im not sure what you're asking (maybe my fault)... With 179 posts I find it hard to believe you dont fully understand Float:left, right and when needed clear: both....

But just in case, here's a good tutorial explaining it.. you can then insert the image anywhere down the text not just the beginning.. and of course is stable across all... ?

[COLOR="#0000FF"]Youtube Tutorial[/COLOR][/QUOTE]

I have been using Float:left and right for years. From what I have read, positioned float is a new CSS command which will allow you to place a float any place on the page, including the middle of the page.

In doing a search, I found this example: http://ie.microsoft.com/testdrive/html5/positionedfloats/default.html

Unfortunately it doesn't work in all browsers. I was wondering if there is any updated information on the status of this command.

Here is another article about this command:

http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

I am looking for information on how to make it work in all browsers.

@jedaisoulAug 29.2014 — #Until its implemented in ALL major browsers - forget it. You are wasting your time. Plus, if it does not degrade gracefully in non-compliant browsers - forget it! You'd be better off learning how to use position: absolute. That allows you to place a div anywhere on the page, and is supported in all browsers, including legacy IE. Of course, text does not flow round it.

@lkeeneyauthorAug 29.2014 — #Until its implemented in ALL major browsers - forget it. You are wasting your time. Plus, if it does not degrade gracefully in non-compliant browsers - forget it! You'd be better off learning how to use position: absolute. That allows you to place a div anywhere on the page, and is supported in all browsers, including legacy IE. Of course, text does not flow round it.[/QUOTE]

Thanks. I wasn't sure if there was some trick to make it work in all browsers, or not.

I am designing a website for a lady, who happens to be a newspaper editor, and she can't understand the limitations of placing an image on a web page and having text wrap around it. She thinks I am trying to cut corners in the layout she presented to me.

@jedaisoulAug 29.2014 — #Well, text can flow round objects, but there are compromises required.

@lkeeneyauthorAug 29.2014 — #Well, text can flow round objects, but there are compromises required.[/QUOTE]

Thanks again.

Unfortunately, my client doesn't understand compromises.

As an example, she insists that everything fit on pages which do not require you to scroll to see all the content. She doesn't understand all the different screen sizes available, and wants me to design for all the different width screens, but make everything fit on the smallest vertical dimension.

@jedaisoulSep 03.2014 — #I've written a demo of what I call "snap responsive" coding, that you may be interested in. It allows the same content to fit the page in a range of windows or devices from full HD down to 480x600 pixels. It will also accommodate widths down to 320 pixels wide, but that requires vertical scrolling.

The demo is [url=http://www.emberwebsites.co.uk/snap-responsive/]here[/url]. Let me know what you think of it...

@lkeeneyauthorSep 03.2014 — #I've written a demo of what I call "snap responsive" coding, that you may be interested in. It allows the same content to fit the page in a range of windows or devices from full HD down to 480x600 pixels. It will also accommodate widths down to 320 pixels wide, but that requires vertical scrolling.

The demo is [url=http://www.emberwebsites.co.uk/snap-responsive/]here[/url]. Let me know what you think of it...[/QUOTE]

Thanks for the demo. It seems to work well.

Is this easily adapted to higher resolution monitors as well? I haven't tried to understand you code for this page.

@Code-tardSep 03.2014 — #Hey Jed, whats going on here.. how it looks to me (IE 11).. ??..

[COLOR="#0000FF"]Screenshot[/COLOR]

@deathshadowSep 04.2014 — #Unfortunately, my client doesn't understand compromises.

As an example, she insists that everything fit on pages which do not require you to scroll to see all the content. She doesn't understand all the different screen sizes available, and wants me to design for all the different width screens, but make everything fit on the smallest vertical dimension.[/QUOTE]

Sounds like they also don't understand what the web is enough to have a website; one of those clients I'd kick to the curb almost instantly. If you hold up a phone or a tablet and show them the content at a legible size just as normally formatted flat text, and they STILL don't get it? Do yourself a favor and walk; said 'client' is NOT worth the headaches.

The web is NOT print; If your "newspaper editor" is unable to grasp that, then they need to shut the park up and not have a website... and I would tell them that to their face; though I would spend the time to at least TRY and explain it to them. They don't get it, want to throw accessibility and sane/rational web design out the window, then they don't actually want a website; it's that simple really.

@jedaisoulSep 04.2014 — #Thanks for the demo. It seems to work well.

Is this easily adapted to higher resolution monitors as well? I haven't tried to understand you code for this page.[/QUOTE]
Like I said, its a compromise. If you want the actual content to fit on a 480x600 screen, and if you do not want the users to have to scroll vertically or horizontally, you can only have 480x600 pixels worth of content on the page. That's roughly 2K or so of text. So to "fill" a larger window you need to have increasing screen acreage filled by headers, footers and whatever! Now you could in theory do that right up to 1920x1080, but you'd probably want to put more content on the page if you did. But if you do that, you will have to scroll the text on anything less than a PC screen. So, yes, it can be done, but there are compromises to be made!

Another point, I chose the height of 600 pixels to fit on the most popular PC screens which are (1366x720). I.e. I've allowed 120px for the browser header etc. That's only a rough estimate, but you certainly can't go much large than that without a significant proportion of users having to scroll the page. So to get more content on the page, you will need to use greater width for content. But excessively long lines of text become less readable, so you may then need to adopt a columnar format. Which, again, is not impossible, but it does raise its own issues.

Basically, I was just showing you what can be done to fit a reasonable quantity of content on a wide range of screen/window sizes.

@jedaisoulSep 04.2014 — #Hey Jed, whats going on here.. how it looks to me (IE 11).. ??..

[COLOR="#0000FF"]Screenshot[/COLOR][/QUOTE]
He hee, more fool you for using IE!!! ?

No, but seriously, I haven't tested the page on IE11, and it seems that it is lying about the device-width. I'm saying "If the device-width is less that 640px, fit the display to the device width". So if IE11 lies and says "My device-width is 320px", that is the display you will get!!! Alternatively, there could simply be an error in my code! Anyway, thanks for pointing that out. I'll have to test on IE11 and see what I can do about it. If anyone has an idea of how to solve this, by all means post it!

postscript:

Oops, there is a bug in my code (missing "}"). I'll update the site when I'v fixed another bug that has appeared...

@jedaisoulSep 04.2014 — #I've fixed the bug that was upsetting IE11. Let me know if you come across any other issues. Thanks.

Also in #CSS _↴

problem with css Create a room view with calendar for Hotel Management System Issue with BG in Safari only

Success!

Help @lkeeney spread the word by sharing this article on Twitter...

Tweet This

CSS positoned floats

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS positoned floats

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴