Posted by Jonathan N. Little on 01/26/06 23:38

David Graham wrote:
> "Jonathan N. Little" <lws4art@centralva.net> wrote in message
> news:43d8f174$0$8299$cb0e7fc6@news.centralva.net...
>
>>David Graham wrote:
>>
>>
>>>>CSS:
>>>>.pixboxleft IMG {
>>>>display: block;
>>>>}
>>>
>>>
>>>Hi
>>>I understand your css OK but what is the display: block; for?
>>>I commented this out and it doesn't seem to do anything. Why can't the
>
> img
>
>>>element remain an inline element?
>>>thanks
>>>David
>>>
>>>
>>>
>>
>>Because images are displayed inline by default, if you do not explicitly
>>set the width of the containing block element and with viewport is is
>>wide enough the text will not wrap under image
>>
>>+------DIV-------+ The rest of
>>|[ IMAGE ] text | your page
>>+----------------+ content ...
>>
>> Image as block
>>
>>+----DIV--+ The rest of your
>>|[ IMAGE ]| page content ...
>>| text |
>>+---------+
>>

>
> Thanks for that Jonathan but did you see my later post about float right not
> affected by display: block, it always behaves like that regardless of
> whether it is stipulated in the css or not were as float left does need the
> rule display:block. Why?
>
>

..pixboxright {
float: right; margin: 0 0 .5em .5em; border: 1px solid black;
}

/*
With IMG to block disabled
..pixboxright IMG { display: block; }
*/

Produces:

The rest of +------DIV-------+
your page |[ IMAGE ] text |
content ... +----------------+

if view port is wide enough (Moz 1.7.12, FF1.5, O7.5 NN7.2 IE5.0-6.0 Of
course float broken in IE4.0 & NN4.x on Win2K)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]