Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    A (New?) Question About Floats

    As I've come to understand it, the normal "flow" of an HTML document is "down". We break the flow, using a float.

    I notice that the normal flow, of an unstyled document is:
    Down for text (paragraphs and headings) and...
    left/right for images. I once saw it asserted, that you cannot "stack" images, in the normal run of things.

    So how does it come to be, that I must float my images, when using CSS, to get them to produce a layout, where they sit next to each other? Floating paragraphs underneath them is understandable... But why images?

    Or have I unnecessarily been floating my images?

    Any helpful answers, gratefully recieved.

    Last edited by Doctor_Varney; 11-12-2008 at 07:48 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Or have I unnecessarily been floating my images?
    May be, as img is an inline element and by default no inline elements(like a,span,em,img etc) produce line breaks and thus they can sit horizontally in the same line.

    (Read http://www.autisticcuckoo.net/archiv...ck-vs-inline-1)

    When we apply a float to an inline element, it'll exhibit some properties of a block level element, but another block/inline element can share the same horizontal level with this element unless we clear the floats for the adjacent element.

    With that said, when designing a layout, img exhibits some problems if the height of the image is different from the line-height (it'll become hard to align text along with an image). vertical-align may solve it to an extend. In some cases applying a float would solve the issues.
    Last edited by abduraooft; 11-12-2008 at 09:07 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Doctor_Varney (11-12-2008)

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Thanks, Abdura...
    I think, in order to fully understand your second paragraph, I need to understand the real difference, between 'inline' and 'block-level'.

    I once picked up that display:block is necessary, in order to give an element a link attribute. This doesn't make an awful lot of sense. Despite reading a few articles, I haven't quite picked up an understanding of exactly what it means for an element to be either inline, or block-level.

    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You have probably read this one.
    It's not much, but every little helps.

    Frank
    Last edited by effpeetee; 11-12-2008 at 08:30 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    Doctor_Varney (11-12-2008)

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    As it happens, Frank, no I hadn't read that. It's an elegantly simple explanation of the terms. Most helpful!

    I shall do some...

    ...experiments.

    Many thanks,

    Last edited by Doctor_Varney; 11-12-2008 at 08:28 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Doctor_Varney View Post
    As it happens, Frank, no I hadn't read that. It's an elegantly simple explanation of the terms. Most helpful!

    I shall do some...

    ...experiments.


    Many thanks,

    Cor! The mind boggles.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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