Formatting Prob: Span Moves Outside Containing DIV

pbd22

Hi.

I have been wrestling with getting a span (or a few)
to live inside a few divs. I want to put padding around
the span but it seems to move independent of the divs
even though there is no float. I am wondering if display:block
is messing stuff up? Or, something else?

do you see what I am doing wrong?

thanks.

Code:

<div style="display: block;" class="bluePanel" width="100%"
tabcolor="blue" panelurl="http://localhost:2032/Site/Tabs.aspx"
id="panel_today">
<div>
<span style="padding: 5px; background-color: white;">one</span>
<span>two</span>
<span>three</span>
<span>four</span>
</div>
</div>

the bluePanel CSS:

Code:

.bluePanel
{
background: #acc6d5;
padding-left:5px;
border: 1px solid black;
border-top: 0px;
}
Edit/Delete Message

Apr 25 '07 #1

John Hosking

pbd22 wrote:

I have been wrestling with getting a span (or a few)
to live inside a few divs. I want to put padding around
the span but it seems to move independent of the divs
even though there is no float.

Unfortunately, I don't understand your problem. What do you mean, "it
moves?" The padding appears for me, but the content of the span remains
inline, as is its wont. I don't see what "moves."

I am wondering if display:block is messing stuff up?

Shouldn't oughta. A DIV is display:block by default.

Or, something else?

do you see what I am doing wrong?

No, but again, I don't understand the question. I've pasted your code
into a file of my own and done some "testing" but I'm not sure what I'm
looking for. That said, I'm thinking you may not have tried to validate
the code. Visit http://validator.w3.org/ for the HTML,
http://jigsaw.w3.org/css-validator/ for the CSS.

You might also try it with a simplified test case, one which doesn't
have a bunch of Java in it, for example.

>
Code:

As always, a URL is preferable to pasted, incomplete code.

>
Edit/Delete Message

Is this your sig? Catchy ;-)

HTH
--
John

Apr 25 '07 #2

Bergamot

pbd22 wrote:

>
I want to put padding around
the span but it seems to move independent of the divs
even though there is no float.

Code:

Don't post code, post a URL. If your domain isn't publicly available,
find someplace else that is and upload a test page there. Most ISPs give
their users some amount of free web space, and there are free servers
like yahoo/geocities if you're desperate.

Make it easy for people to help you and you'll get a better response.
Posting code is not the way, posting a URL is.

--
Berg

Apr 25 '07 #3