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?
Note, the red border is only there to demonstrate the issue. Andy.
DIV contains SPAN
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
DIV contains SPAN
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.
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: DIV contains SPAN
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.
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: DIV contains SPAN
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.
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.
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: DIV contains SPAN
Yes, a div is display:block by default, so the parent div would expand vertically to make room.agibsonsw wrote:Would using another div rather than a span have made any difference?
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: DIV contains SPAN
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.jscher2000 wrote:Yes, a div is display:block by default, so the parent div would expand vertically to make room.
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.
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: DIV contains SPAN
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: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?
I don't think either the margin or the border is part of the element. Well, I haven't tested either...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.
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: DIV contains SPAN
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.
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: DIV contains SPAN
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: And with the DIV: 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 )
Hopefully someone can point me in the right direction. Thanks, Andy.
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: And with the DIV: 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 )
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.
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: DIV contains SPAN
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.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; }
Edit: For this part --
-- try adding to the margin-bottom of whatever container holds the buttons (e.g., 1.1em rather than 1em, etc.).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 )
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: DIV contains SPAN
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 ). Andy.
#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 ). Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.