Adjust spacing/margin/padding (?) between divs

As the post title no doubt indicates, I am terminologically challenged in asking this question. Best to provide a URL to the page I’m working on: pls see here.

When I insert an “Ed Note” between normal paragraphs, the spacing is as intended. Code for “Ed Notes” as follows:
.ednotes {
color:#0000FF;
font-size: .8rem;
line-height: 1.1rem;
text-align: justify;

width: 95%;
padding: 10px;

top: -30px;
position: relative;
margin-bottom: -10px;
}

I messed around with the code until I got the space between the ed notes and the next para looking the same as the spacing between standard paras. (I also fiddled until I got the ed notes justified and looking equally indented on the left and right sides, and the spacing between preceding text and ed note reduced to what you see on the page linked to). There’s probably a better and more elegant solution in both cases. Anyway…

For some reason, whenever the ed notes are followed by a featured quote or heading, the space between is larger than between ed notes and standard paras.

Example 1:
In the section with the heading “BIRTH OF THE GEEKS”, the space is too big between the ed note and the featured quote
<div style=“text-align: center; margin: 2rem;”><span style=“font-size: 1.1rem;”><strong>“Ross’s hands were a continual blur as he shot through the chords in supposed imitation of Johnny Ramone…”</strong></div>

Example 2:
The space is too big between the ed note immediately preceding the heading “DAVE FAULKNER FLUNKS GEEKS AUDITION”. Ditto re the ed notes preceding the later heading “DEATH OF THE GEEKS, BIRTH OF THE VICTIMS”.

Would be appreciative if someone could explain why the spacing blows out in examples 1 and 2, and how to adjust so the space is the same as per usual paras.

Cheers!

It looks like you have gotten creative with the positioning of ednotes. I believe Ralph’s suggestion was to use a negative margin-top to counter the paragraph’s margin-bottom. I don’t recall anything being mentioned about using position:relative. Position:relative will move an object but it does not vacate the original space occupied by that object, so raising ednotes with position:relative is working against you because the page reserves the space previously occupied by the ednotes. Makes for a lot of white space beneath it.

negative margins and position:relative can cause real headaches until you realize that you probably don’t need either one.

.ednotes should look something like this:


.ednotes {
    color: #0000FF;
    font-size: 0.8rem;
    line-height: 1.1rem;
    text-align: justify;
    [color=red][s]position: relative;[/s][/color]
    [color=red][s]top: -30px;[/s][/color]
    width: 95%;
    [color=red][s]padding: 10px;[/s][/color]
    [color=blue]margin-top: -1.75rem;[/color]
    [color=blue]margin-bottom: 1.75rem;[/color]
}

Try this and see how things look. Then we can adjust the different appearances of .ednotes. The values that I’ve applied closely match the margins around your paragraphs, so it should fit in the flow almost like any other paragraph except that is negates the margin beneath the preceeding paragraph.

PS: per Ralph’s recommendation, a negative margin-top IS needed for this solution.

PPS: I’m not sure why you’ve added the vertical padding. It just means more negative margin-top is required to position .ednotes. It also adds to the space below.

EDIT: This file has an HTML5 doctype, which is easily the most forgiving of coding errors in the land, yet it shows 72 errors. If you care about your code, you need to take a serious look at the validator.

The quote describing Ross’ hands is in a <div> which has large top and bottom vertical margins. It is pushing the preceeding .ednotes further away.


<div style="text-align: center; margin: 2rem;">
	<span style="font-size: 1.1rem;">
		<strong>"Ross's hands were a continual blur as he shot through the chords in supposed imitation of Johnny Ramone..."</strong>
	</span>
</div>

Many thanks ronpat, as always, for your excellent recommendations and astute troubleshooting. I’ve implemented the coding you recommended for ‘ednotes’, and it’s fixed the spacing problems. However, the ednotes are no longer centred and indented. Any suggestions on how I can get that back, pls? It’s not as important as the spacing issues, so if it’s a time-consuming or involved solution, pls just leave it. I don’t want to outstay my welcome!

My “creative” changes to Ralph’s code suggestions were partly a result of my usual tinkering according to my haphazard and ill-informed approach of “try it and check the page appearance, then try again until you get things looking how you want them”, and partly a result of deferring to an allegedly more “correct” code recommended on the wordpress.org support site. To quote:

[I][Your code] works, but there are 2 issues that I can see with it.

  1. It doesn’t address the underlying issue.
  2. Minus margins format differently on different browsers.

You can address concern no.2 by instead using CSS positioning. Positioning is more reliant across browsers than margin.

You’d just replace the margin-top property with top and add position: relative;

top: -24px;
position: relative;[/I]

I haven’t dared to even check how my site looks in browsers other than Firefox - fearful of having to do a whole lot of adjustments to the code. I guess I just wanted to try to do things the “right” way; hence following the advice in italics above. I’m probably better off just sticking to one set of advice - and yours, and others here at Sitepoint, has proven terrific. I’d already asked the query at wordpress.org and returned there for feedback after implementing Ralph’s code. From now on, I won’t switch horses like that.

Going by your comments on the HTML5 doctype file having 72 errors, my attempts to ensure I had the “correct” code have been spectacularly awry - a result of not knowing what I’m doing, no doubt. I do try to understand things as I implement your and others’ recommendations, and keep a Word doc listing all the changes I’ve wanted to make and the CSS solutions subsequently sought out and implemented. It’s my clumsy attempt to educate myself, and evidently not terribly successful so far. Thing is, I don’t have time to diligently work my way through a site like W3 Schools. I’m trying to learn “on the run” without having any fundamental knowledge of CSS to begin with. Anyway…

To be honest, I don’t know what ‘HTML5 doctype’ means (I assume it refers to Wordpress’s basic system), and have never heard of ‘the validator’ you refer to. Would you mind expanding briefly on this, pls? I hate the idea that my code is full of errors (although I’m not surprised, given the way I go about things), and whatever this validator thingo is, if it can identify the errors and assist in correcting them I definitely need to know where to get it and how to apply it!

Indebted to you for your help. I’m within sight of finishing the layout aspects of this current project, so hope I won’t need to keep asking all these questions soon. The rest of the project will involve graphics design - can feel my way around Illustrator and Photoshop, so that shouldn’t be as problematic as these CSS and other coding issues.

Cheers

Let’s deal with just .ednotes first, then we can move on to the other questions, OK?

I get to eat some crow this time because my earlier statement implying that negative margins and position relative were troublesome was too general. Ironically, you need both properties to satisfy .ednotes need but not in the same way they were being used before, so therein lies absolution. :slight_smile:

Let’s fix .ednotes.

(1) Add the outline shown below so you can visualize what we are doing.


.ednotes {
    [color=blue]outline: 1px solid magenta;[/color]
    color: #0000FF;
    font-size: 0.8rem;
    line-height: 1.1rem;
    text-align: justify;
    width: 95%;
    margin-top: -1.7rem;
    margin-bottom: 1.7rem;
}

Notice that the outline box extends 95% of the width of the page, as instructed. The left edge of the outline is missing because it is being cut off my overflow:hidden applied to an ancestral container. That’s normal.

(2) For the sake of this exercise, and because I think it’s a more predictable way of setting the left and right margins around .ednotes, lets delete width:95%. Doing so restores the default width of 100% to the .ednotes container.

You will see the contents of .ednotes extend to the full width of the column and both horizontal edges of the magenta outline cut off. That’s expected.

(3) Next, we need indent .ednotes by a fixed amount. For this exercise, I chose 16px. Here’s how we do it.
Add the properties {position:relative; left:16px;} as shown below.


.ednotes {
    outline: 1px solid magenta;
    color: #0000FF;
    font-size: 0.8rem;
    line-height: 1.1rem;
    text-align: justify;
    [color=blue]position: relative;
    left: 16px;[/color]
    margin-top: -1.7rem;
    margin-bottom: 1.7rem;
}

Notice that the .ednotes text is now indented by 16px. Notice also that the left edge of the outline box is visible… we moved the entire box and its contents to the right. HOWEVER, notice that the right edge of the .ednotes text is truncated at the right edge of the page. We need to reduce the width of the .ednotes box OR change its right margin. In the name of predictability, we’re going to apply a right margin instead of a percent width.

(4) Add {margin-right:32px;} as shown below.


.ednotes {
    outline: 1px solid magenta;
    color: #0000FF;
    font-size: 0.8rem;
    line-height: 1.1rem;
    text-align: justify;
    position: relative;
    left: 16px;
    margin-top: -1.7rem;
    [color=blue]margin-right: 32px;[/color]
    margin-bottom: 1.7rem;
}

Why 32px? Because it is twice the value of {position:relative;left:16px;} and thus centers the .ednotes container.

You should now see the complete outline around the .ednotes box, and see that the right edge of the text is indented exactly the same amount as the left edge of the text.

That’s it! Delete the outline.

If this example makes sense, hopefully you will be able to change whatever values needed to set the indents that you wish to see.

ronpat, I’ve read through your post twice at different times in a very time-deprived day. Really hanging out to work through the mods as you’ve set them out, with the outline to demonstrate visually what each change does. What a thoughtful way to present the code changes, enabling me to follow along like that. As a teacher for 25 years, I appreciate your educative strategy! I’m thinking there’s every likelihood you have also taught in some capacity at some stage. But whatever, thank you for your thought and effort, and I’ll get back as soon as I’ve found time to follow your recommendations. That will be tomorrow (12.45am here now). I’ll make sure of that.

Cheers!

Hi ronpat,

Well, I worked through your instructions from go to whoa, and not only has your code created perfectly positioned editorial notes, but in following along with the outline in place I learnt more about CSS in 10 minutes than in my many hours of asking questions, trying code recommendations, and messing with the values. All quite thrilling to see the code working bit by bit as each new line was added, and to actually understand what was happening and why. Thanks so much.

I may have found the answer to my question about CSS validators - found one here. The number of errors you mentioned didn’t show up when I ran the validator on my site URL, though. So no doubt I’m still missing something.

Big cheers!

Thanks very much for the feedback, rolanstein. It’s always rewarding to know when something works out well. :slight_smile:

Yes, there are two validators. The one you visited is the CSS validator. Don’t lose it! The one that I was referring to is the HTML validator which can be found at http://validator.w3.org/ . A more convenient, and probably easier to interpret version of the validator can be installed in Firefox as a plugin. See https://addons.mozilla.org/en-US/firefox/addon/html-validator/ .

Another VERY worthwhile Firefox plugin for the coder is Firebug, https://addons.mozilla.org/en-US/firefox/addon/firebug/ . It’s an essential troubleshooting aid.

You wondered what a doctype is. It is the very top line of an HTML file and identifies the standards to which the HTML is written which tells the browsers how to interpret the HTML. It has nothing to do with WordPress or CSS. You can find plenty of information about doctypes at http://www.w3.org/wiki/Doctypes_and_markup_styles , http://www.w3.org/QA/2002/04/valid-dtd-list.html and http://reference.sitepoint.com/html/doctypes . You can’t tell from these documents, but DOCTYPES are generally written on one line, not two. For example:


The HTML 5 DOCTYPE is simply:
<DOCTYPE html>

The HTML 4.01 strict DOCTYPE looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Then there is the XHTML DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is not the complete list. In addition, there are doctypes that identify documents other than HTML. The important thing to remember is that a valid doctype is required atop an HTML file otherwise the rendering of the page in browsers will be inconsistent.

Give the HTML validator a go. The explanations may not make sense at first, but will become meaningful through experience. If you have specific questions, don’t hesitate to ask.

Cheers.

Look, thanks again so much, ronpat. You haven’t only answered my specific questions and provided excellent solutions - you’ve significantly advanced my CSS education and understanding. I’ll have a mess with the validators and check out the other links you’ve so kindly given. I already have Firebug, but am hit and miss in the way I use it. I have to find a good Firebug tutorial and sit through it a few times.

Cheers!