...

View Full Version : A (New?) Question About Floats



Doctor_Varney
11-12-2008, 08:38 AM
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.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

abduraooft
11-12-2008, 08:52 AM
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/archive.php?id=2005/01/11/block-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 (http://www.w3schools.com/Css/pr_pos_vertical-align.asp) may solve it to an extend. In some cases applying a float would solve the issues.

Doctor_Varney
11-12-2008, 09:03 AM
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.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

effpeetee
11-12-2008, 09:17 AM
You have probably read this one. (http://www.webdesignfromscratch.com/css-block-and-inline.cfm)
It's not much, but every little helps.

Frank

Doctor_Varney
11-12-2008, 09:21 AM
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. :cool:

Many thanks,

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

effpeetee
11-12-2008, 10:56 AM
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. :cool:

Many thanks,

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

Cor! The mind boggles.:confused::eek::D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum