div layout with image and text

[largo6]

hello

i have this code:

<div class="round" id="box4" style="float: right;width: 930px;margin-top: 15px;height: 280px;border: 1px solid #9E9E9E;color:white;">
<div style="float:right;"><img src="<?php echo "/?page_id=367&img=" . $temp[count($temp)-1] . "&w=250&h=250"; ?>"  /></div>
<span style="padding:10px;"><?php echo nl2br($the_query[0]->post_content); ?></span>
</div>

this a wordpress code.
you can see how it looks here, this is the big box before the footer:
http://ms.wpcoder.co.il/

this is basicly how i want it to look but i can't apply padding to the text on the right side and if i play with it the bottom text under the picture doesn't get the padding.

thanks for the help.

[Paul O'B]

Hi,

Why have you used a span? A span is an inline element and is not meant for holding blocks of text like that. You should be using a block element like a div or p element if its only one paragraph (or a div with p elements inside).

For your span to take vertical padding you would need to set it to display:block but it won''t be semantically correct in that situation.

To get space to the left and bottom of the image you need to add margins to the float because the padding and margins on static elements slide under a float.

e.g.

<div style="float:right;margin:0 0 10px 10px">

Of course that should be done via a class and not inline styles.

[largo6]

hi paul

thanks for the great answer, the truth i don't know exactly what each html tag type can do etc... and i will ask you something after i will sort the issue i'm having.
what you offered worked great but as i sad in my question:

the bottom text under the picture doesn't get the padding.

i will explain i'm have all my text wrapped now in a p tag, but some of the text that flow under the image act as a different part .
what i mean if i apply padding to the p tag only the bottom text part moves Although the top and bottom are the same part.
why the top part doesn't move ? without putting margin to the div or the img

is that the reason ?

To get space to the left and bottom of the image you need to add margins to the float because the padding and margins on static elements slide under a float.

the top part float right and stick to the img while is bottom part not ?
thanks

[Paul O'B]

Hi,

The only way to make space around a float is to put margins on the float itself. Adding padding or margins to the content that wraps around a float will not make space between the float because margins and padding slide under the float until they reach the containing block.

Just add a margin as shown in my post above and your text will stay clear of the float.

Unless I misunderstood what you meant of course

[largo6]

hi

sorry for nagging but just want to make sure i got it and i really want to learn css proper

look here:
http://wpcoder.co.il/Untitled.png

because of the reason you sayed the padding-right applyed in the red part doesn't affect the green part ? Although the wrapped inside one tag ?
if i want to get space in grren part i must use margin-right as you explained because of the float issue ?

if the answer yes why the red part doesn't get affected ? he is inside the same p tag why the float doesn't affect him ?

thanks again

[Paul O'B]

Hi,

Yes the reason is as I stated.

The important thing to know about floats is that they are removed from the flow. Other elements will be laid out as though the float isn't there. The padding right that you add to the green block will be in exactly the same place as your red block except that the float is sitting on top of it so you can't see it.

All borders, backgrounds and padding will slide under a float as if the float wasn't there. They know nothing about the float and cannot react to it. It's the float that displaces content and just moves the text out of the way to make space but doesn't move the padding. That's why you need to apply margins to the float itself if you want room around a float. Or indeed float the other content as well but then it won;t wrap all around the original float.