CSS - Block element not behaving as expected

[shaunk]

I have the following HTML with inline styles.

<img src="../Images/ciap_bg_3.JPG" style="float:left" alt="Ciap" />
<p style="background-color:Fuchsia">Here is the first paragraph</p> 
<p style="background-color:green">Here is the second paragraph</p>

A quote from extensive reading on the float property:
"Floated elements are taken out of document flow, and other block elements remain in flow, acting as if the floated element is not even there".

Given the above, the image should be positioned at the top left of the page and the the block element <p> should position to the right of the element one line down from the top of the page. However, the block element <p> is forcing a new line above the image element, so that the image and paragraph are positioned at the same height.

Apologies, I am not sure how to include an image of what I expect and what I am getting.



What gets us into trouble is not what we don’t know, its what we know for sure that just ain’t so.

 

[vacunita]

"Floated elements are taken out of document flow, and other block elements remain in flow, acting as if the floated element is not even there".

This is not accurate. While the floats are taken out of "normal" document flow, they still affect it. Unlike Absolutely positioned elements which no longer have bearing on the document flow or the elements.

Floated elements still occupy space which alter the flow of the document, but the space the occupy is moved to wherever the float specifies. However floating has an additional effect in that other elements will wrap around the floated element.

In your example the paragraph element will wrap its text around the image.

If you were to absolutely position the image, then the paragraph would not be affected by the image and start at the beginning of the line effectively overlapping the image. z-index would control which element would appear higher in the layering.

The only scenario in which the paragraph would being in a subsequent line would be if the image was set as a block level
element with no floating or if it where wrapped in a block level element that had a specified height or its overflow set to something other than visible.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[shaunk]

Thankyou Vacunita,

I understand what you are saying and thanks for the info.

The paragraph is not actually on a new line, it flows immediately to the right of the image as expected, is positioned at the same height as the floated image, both of which are pushed down a line from the top of the page. I wish I could show you an image of what it looks like.

Sorry for confusing the issue.


What gets us into trouble is not what we don’t know, its what we know for sure that just ain’t so.

 

[vacunita]

Unless you have some other css, that should not happen. If you are getting a space, perhaps make sure padding and margin are set to 0 for all elements.

*{
padding:0;
margin:0;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[shaunk]

Thankyou, it worked.
I added the padding/margin setting to the body element.
I am working in ASP.net which has a css theme for the page, but the body margin and padding were set to zero, so I don't quite understand where it was being set....will continue the search.

What gets us into trouble is not what we don’t know, its what we know for sure that just ain’t so.