div within div

[Tom]

If i have a div within div

lets say the main one has text and the inset one has an image

how do i get the text to wrap around the image if say it is left (float)

I am trying to use CSS to put a border around the images.

The image looks OK the border looks OK, but the text in the main div is hard
up against the bordered image. I am not sure how to fix this. It looks
better if there is a gap but i can't get this to work

Can anyone help and please like my previous posts try be helpful and don't
flame me with all sorts of negative comments. ( can anyone direct me to a
beginners html newsgroup)

thanks in advance

 

[Richard]

If i have a div within div

lets say the main one has text and the inset one has an image

how do i get the text to wrap around the image if say it is left (float)

I am trying to use CSS to put a border around the images.

The image looks OK the border looks OK, but the text in the main div is hard
up against the bordered image. I am not sure how to fix this. It looks
better if there is a gap but i can't get this to work

Can anyone help and please like my previous posts try be helpful and don't
flame me with all sorts of negative comments. ( can anyone direct me to a
beginners html newsgroup)

thanks in advance

CLUE: Margin and padding.

You can also copy the image onto a solid single color image and use that as
a spacer for the effect.
Make your division for the image a bit bigger for the image and center the
image.

 

[Augustus]

If i have a div within div

lets say the main one has text and the inset one has an image

how do i get the text to wrap around the image if say it is left (float)

I am trying to use CSS to put a border around the images.

The image looks OK the border looks OK, but the text in the main div is hard
up against the bordered image. I am not sure how to fix this. It looks
better if there is a gap but i can't get this to work

Can anyone help and please like my previous posts try be helpful and don't
flame me with all sorts of negative comments. ( can anyone direct me to a
beginners html newsgroup)

thanks in advance

You can use "border" to put a border around the image...
You can use "padding" to put space between the image and the border...
You can use "margin" to put space between the border and whats around it...

IE:

<img src="myimage.gif" style="border:1px solid black;margin:5px;">

That would have a 1px border snug around the image and then pad the image by
5px from everything around it.

 

[Richard]

You can use "border" to put a border around the image...
You can use "padding" to put space between the image and the border...
You can use "margin" to put space between the border and whats around it...

IE:

<img src="myimage.gif" style="border:1px solid black;margin:5px;">

That would have a 1px border snug around the image and then pad the image by
5px from everything around it.

For some reason though, I've found margin is quite picky in the numbers
assignment dept.
margin:5px; is the equivelant of margin-top:5px; PERIOD!
It goes in a rotational sequence, top, right, bottom, left.
So if you wanted a right margin of 5 px you'd write margin:0px 5px.
It does not give all 4 sides an automatic value if only one entry is made.
To do that you would write margin:5px 5px 5px 5px;

 

[Wÿrm]

margin:5px; is the equivelant of margin-top:5px; PERIOD!

Bollocks! margin: 5px; sets EVERY (top, right, bottom, left) margin to 5px.
Read http://www.w3.org/TR/REC-CSS2/box.html#margin-properties and weep.

It goes in a rotational sequence, top, right, bottom, left.

yes, this IS true if you set ALL values...

So if you wanted a right margin of 5 px you'd write margin:0px 5px.

Would set right and LEFT margin to 5px not only right. So that's crap.

It does not give all 4 sides an automatic value if only one entry is made.

yes it does. Read http://www.w3.org/TR/REC-CSS2/box.html#margin-properties
or see http://www.kolumbus.fi/ace/ng/margin.html

To do that you would write margin:5px 5px 5px 5px;

Nope. margin: 5px; is enough for that. Don't believe?
See http://www.kolumbus.fi/ace/ng/margin.html

 

[Oli Filth]

For some reason though, I've found margin is quite picky in the numbers
assignment dept.
margin:5px; is the equivelant of margin-top:5px; PERIOD!
It goes in a rotational sequence, top, right, bottom, left.
So if you wanted a right margin of 5 px you'd write margin:0px 5px.
It does not give all 4 sides an automatic value if only one entry is made.
To do that you would write margin:5px 5px 5px 5px;

What are you talking about??

"margin: 5px" sets all four margins to 5px.
"margin: 5px 10px" sets top and bottom to 5px, left and right to 10px.
"margin: 5px 10px 15px 20px" sets top to 5px, right to 10px, bottom to
15px, left to 20px.

 

[Del Ferguson]

What are you talking about??

"margin: 5px" sets all four margins to 5px.
"margin: 5px 10px" sets top and bottom to 5px, left and right to 10px.
"margin: 5px 10px 15px 20px" sets top to 5px, right to 10px, bottom to
15px, left to 20px.

All,

It probably wasn't the intention of the previous posts; however it opened
my eyes to where I was going wrong. In my website I was using DIV in
place of TABLES to format columns on a page; however, I found that IE
would display differently than FireFox. I think it was the continued
thinking
that all settings for margin and padding went clockwise. So, I went back to
TABLES. My eyes have been opened and I see the light. Now I can go
back to DIV and have my Strict XHTML pages the way I want them.
Thanks, again, to all.

Cheers,

Del Ferguson

 

[Toby Inkster]

"margin: 5px" sets all four margins to 5px.
"margin: 5px 10px" sets top and bottom to 5px, left and right to 10px.
"margin: 5px 10px 15px 20px" sets top to 5px, right to 10px, bottom to
15px, left to 20px.

And don't forget:
"margin: 5px 10px 15px" sets top to 5px, left and right to 10px and bottom
to 15px.

 

[Toby Inkster]

how do i get the text to wrap around the image if say it is left (float)
I am trying to use CSS to put a border around the images.
The image looks OK the border looks OK, but the text in the main div is hard
up against the bordered image.

Something like this?

#myimg {
float: left;
border: 2px dotted green;
padding: 3px;
margin: 10px 10px 5px 0;
}

I tend to only use a small bottom margin in such cases -- if you play
around with such things for a while, you'll see why.

 

[Sid Ismail]

On Sat, 15 Jan 2005 10:08:31 +0000, Toby Inkster

: Tom wrote:
:
: > how do i get the text to wrap around the image if say it is left (float)
: > I am trying to use CSS to put a border around the images.
: > The image looks OK the border looks OK, but the text in the main div is hard
: > up against the bordered image.
:
: Something like this?
:
: #myimg {
: float: left;
: border: 2px dotted green;
: padding: 3px;
: margin: 10px 10px 5px 0;
: }
:
: I tend to only use a small bottom margin in such cases -- if you play
: around with such things for a while, you'll see why.


Yeah - in the old days, hspace was always bigger than vspace for me too.

Sid

 

[Andy Dingley]

If i have a div within div

lets say the main one has text and the inset one has an image
how do i get the text to wrap around the image if say it is left (float)

As a vague thought (and not thought through at all) I'd lose the inner
<div>. You have the <img>, you can use CSS to give it all the margins
or padding you might want.

The problem with placing it into a <div> and then trying to control
that is that most browsers have some quite complex (and useful)
behaviour for flowing text around <img> and they don't apply this to a
<div>, no matter how you tweak the CSS display properties.

To fix your immediate problem, try some variant on this:

img.foo {
padding: 1em;
}