www.webdeveloper.com
Results 1 to 14 of 14

Thread: CSS positoned floats

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184

    CSS positoned floats

    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?
    Larry

  2. #2
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    76
    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...

    Youtube Tutorial

  3. #3
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184
    Quote Originally Posted by Code-tard View Post
    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...

    Youtube Tutorial
    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/ht...s/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.c...Submition.html

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

  4. #4
    Join Date
    Mar 2012
    Posts
    1,495
    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.
    Last edited by jedaisoul; 08-29-2014 at 02:17 PM.

  5. #5
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184
    Quote Originally Posted by jedaisoul View Post
    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.
    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.
    Larry

  6. #6
    Join Date
    Mar 2012
    Posts
    1,495
    Well, text can flow round objects, but there are compromises required.

  7. #7
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184
    Quote Originally Posted by jedaisoul View Post
    Well, text can flow round objects, but there are compromises required.
    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.
    Larry

  8. #8
    Join Date
    Mar 2012
    Posts
    1,495
    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 here. Let me know what you think of it...

  9. #9
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184
    Quote Originally Posted by jedaisoul View Post
    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 here. Let me know what you think of it...
    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.
    Larry

  10. #10
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    76
    Hey Jed, whats going on here.. how it looks to me (IE 11).. ??..

    Screenshot

  11. #11
    Join Date
    May 2014
    Posts
    897
    Quote Originally Posted by lkeeney View Post
    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.
    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.
    Java is to JavaScript as Ham is to Hamburger.

  12. #12
    Join Date
    Mar 2012
    Posts
    1,495
    Quote Originally Posted by lkeeney View Post
    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.
    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.

  13. #13
    Join Date
    Mar 2012
    Posts
    1,495
    Quote Originally Posted by Code-tard View Post
    Hey Jed, whats going on here.. how it looks to me (IE 11).. ??..

    Screenshot
    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...
    Last edited by jedaisoul; 09-04-2014 at 04:28 AM. Reason: found a bug

  14. #14
    Join Date
    Mar 2012
    Posts
    1,495
    I've fixed the bug that was upsetting IE11. Let me know if you come across any other issues. Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles