DIV contains SPAN

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

DIV contains SPAN

Post by agibsonsw »

Hello.

I have a DIV called 'containsClock' containing a SPAN called 'myClock' with the following CSS:

#containsClock { position:absolute; right:10px; top:10px; border: 2px solid red;}
#myClock { position:relative; width:160px; border: 3px solid lightblue; padding: 3px; text-align:center; }

In the image below the span overlaps the div vertically but not horizontally. Why is this please?
clock1.png
Note, the red border is only there to demonstrate the issue. Andy.
You do not have the required permissions to view the files attached to this post.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
jscher2000
2StarLounger
Posts: 148
Joined: 26 Dec 2010, 18:17

Re: DIV contains SPAN

Post by jscher2000 »

It is because the <span> is display:inline rather than display:block or display:inline-block. This causes the <div> to be sized by the line-height of its contents rather than the sum of dimensions of the actual box. I think the workaround is to manually pad the <div> to create space for the border around the <span>. Maybe there is something more elegant.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: DIV contains SPAN

Post by agibsonsw »

Thank you for this explanation.

It wasn't causing an issue, but I decided to float the clock as it appears in the top-right corner with nothing near it. Would using another div rather than a span have made any difference? Thanks, Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
jscher2000
2StarLounger
Posts: 148
Joined: 26 Dec 2010, 18:17

Re: DIV contains SPAN

Post by jscher2000 »

agibsonsw wrote:Would using another div rather than a span have made any difference?
Yes, a div is display:block by default, so the parent div would expand vertically to make room.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: DIV contains SPAN

Post by agibsonsw »

jscher2000 wrote:Yes, a div is display:block by default, so the parent div would expand vertically to make room.
I think I would have used this as a solution. The clock wasn't 'inline' with anything anyway, so it had no need to be a span.

Quick questions of DIVs please:

1) What is the correct way to obtain vertical spacing between DIVs so that they can effectively become paragraphs? Adjusting margins?

2) Is the margin (or border) a clickable area? I mean, does it respond to the onclick event? I'm assuming the margin isn't, otherwise I would just be clicking empty space.

(I suppose I could answer question two myself, by creating a very big div.. ) Thanks, Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
jscher2000
2StarLounger
Posts: 148
Joined: 26 Dec 2010, 18:17

Re: DIV contains SPAN

Post by jscher2000 »

agibsonsw wrote:Quick questions of DIVs please:

1) What is the correct way to obtain vertical spacing between DIVs so that they can effectively become paragraphs? Adjusting margins?
Yes, margins are good because they collapse, i.e., if you put a top and bottom margin of 1em on successive <div>s they should be spaced 1em apart.
agibsonsw wrote:2) Is the margin (or border) a clickable area? I mean, does it respond to the onclick event? I'm assuming the margin isn't, otherwise I would just be clicking empty space.
I don't think either the margin or the border is part of the element. Well, I haven't tested either... :grin:

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: DIV contains SPAN

Post by agibsonsw »

Thank you. Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: DIV contains SPAN

Post by agibsonsw »

I have a very similar question. I had paragraphs containing a checkbox, image and span (appearing in blue underneath). I put them within a DIV to more easily delete and re-order them.

But now I have a gap above them that I'm struggling to remove. I've been looking at the margins, line-height, etc. The paragraphs are named 'myPara' so perhaps I can create a css rule for them that will fix the problem? Here is the earlier version without the DIV:
div1.png
And with the DIV:
div2.png
The css forthe DIV at the moment is: excludes { width:600px; margin:0; border: 0; padding: 1px; }

(I have to use a padding to prevent IE creating an even bigger gap (on occasion) when I sort the paragraphs - IE has a mind of it's own :hairout: )

Hopefully someone can point me in the right direction. Thanks, Andy.
You do not have the required permissions to view the files attached to this post.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
jscher2000
2StarLounger
Posts: 148
Joined: 26 Dec 2010, 18:17

Re: DIV contains SPAN

Post by jscher2000 »

agibsonsw wrote:I had paragraphs containing a checkbox, image and span (appearing in blue underneath). I put them within a DIV to more easily delete and re-order them.

But now I have a gap above them that I'm struggling to remove. I've been looking at the margins, line-height, etc. The paragraphs are named 'myPara' so perhaps I can create a css rule for them that will fix the problem?

...

The css forthe DIV at the moment is: excludes { width:600px; margin:0; border: 0; padding: 1px; }
1 pixel seems small, but placing 1px of top or bottom padding in the div prevents margin collapsing. In other words, usually two vertically adjacent <p> elements should collapse the margin between them to the larger of their respective margins. However, the <p> in a <div> with 1px padding forces the top margin to be entirely inside the <div>, doubling (plus 1px) the space between the two paragraphs.

Edit: For this part --
agibsonsw wrote:(I have to use a padding to prevent IE creating an even bigger gap (on occasion) when I sort the paragraphs - IE has a mind of it's own :hairout: )
-- try adding to the margin-bottom of whatever container holds the buttons (e.g., 1.1em rather than 1em, etc.).

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: DIV contains SPAN

Post by agibsonsw »

jscher: Thank you and, whe'hay! fixed it. I hadn't given the paragraphs a class (I was using their name in the css, Doh!).

#excludes { width: 600px; }
.myPara { margin-top: 0; }


Removing the top-margin for the paragraphs works as the bottom margin is computed to include the span beneath it. This enabled me to remove all the 0 settings for the DIV and IE doesn't jump about anymore.

I do like CSS but find that if you start to make changes it often escalates and you have to amend more and more. Better to keep deleting rules until you find the one (or two) that work.

Thank you for your assistance (again :smile: ). Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.