Question about css etiquette margin/p/padding

HTML & CSS
1

I always get into these situations were I see the 8 ways to do something and think, what is the best practice to achieve the look i want?

right now I want a thin vertical rule to run to the left of my main content paragraphs.

so i have p {border-left: 1px solid #a49b84}

I have to add padding to the p, to displace the line appealingly from the text.

I generally understand you want to separate paragraphs from each other with margin, but here if I do that the border breaks. if I use padding, though, the margins don’t collapse and some other wonkiness happens.

I’m somewhat tempted to use two breaks between every consecutive paragraph, which actually gives me closest to the look I want. But breaks are not really for that.

So I could put the paragraphs in a containing div, like ‘entry’ that has the border, but i envision the line being broken by certain elements like asides and images…

I’m leaning toward the later solution right now, but just wondering what you cssheads might think?

2

I do not understand “asides”?

I would go for the latter solution with this CSS
[CSS]

.edit {border-left:solid 1px #123; padding-left:0.42em}
.edit img {margin-left:0.42em; border:0 /* may not be necessary */}
[/CSS]

I thnk there should be no need to add specific CSS parameters to your paragraphs.

.

3

As you saw that places the border just alongside the paragraphs. If you want the border on the container holding all the paragraphs then that is where you need to apply it and not to the paragraphs themselves.

4

Hi,
Since we do not have all the specifics of your page structure and how images and other elements will effect it I am assuming that you want the vertical rule beside the paragraphs only.

I would suggest wrapping the p tags in a div too. If you have images within or between any p tags in that div then the left border will obviously continue past them too.

if I use padding, though, the margins don’t collapse and some other wonkiness happens.

If you just want the left border on the p tags only then you could use paddings. You can simulate collapsing margins by setting a top or bottom padding only, but then the border would reflect that. I guess that is what you called “wonkiness”.

You could set the top and bottom paddings the same and then simulate collapsing margins by using a negative margin where p tags follow one another. That could be done with a class where it was needed.

Maybe if you showed us an example of your layout we could nail down an effective solution. :wink:

5

Here is an example of how to handle the various obstacles by using classes on the p tags.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>

<style type="text/css">

body {
    background: #fff;
    font-size:100&#37;;
}
#wrapper {
    width:800px;
    margin:0 auto;
    padding:10px;
    overflow:hidden;/*contain inner floats*/
    background:#DDD;
}
.image {
    float:left;
    width:200px;
    height:100px;
    margin:10px;
    background:lime;
}
p {
    margin:0;
    padding:0 10px 10px;
    border-left:1px solid #000;
    overflow:hidden;/*prevent border from sliding under floats*/
}
p.collapse {padding-bottom:0;}
p.no-vert-pad {margin:10px 0; padding:0 10px;}

</style>
</head>
<body>

<div id="wrapper">
    <p>Lorem ipsum dolor sit amet consectetuer ullamcorper sagittis dui neque at. Pulvinar sollicitudin tristique semper pellentesque et Pellentesque id Nam eros quis. Sed leo tristique scelerisque ipsum sit condimentum ac massa ante dictumst. Vestibulum semper wisi eros massa Morbi ante metus convallis et eget. Turpis nec at fames amet eu eget dolor morbi justo tempus. Tortor urna at Phasellus elit in consectetuer ac mauris.</p>
    <p class="collapse">Nam eget porta orci lacus et vitae consectetuer consectetuer condimentum pellentesque. Id eu ligula porttitor Vivamus ante eu netus ac montes Ut. Odio et eleifend Nullam Donec ac lobortis euismod nunc et et. Quis massa tortor et arcu sollicitudin elit Cras pretium quis metus. Aenean Nunc Cras nec tortor Vestibulum Quisque Sed tristique cursus vitae. Justo Morbi auctor tincidunt lobortis ipsum ipsum orci wisi eget.</p>
    <div class="image">Floated Image</div>
    <p class="no-vert-pad">Sed parturient Integer at pellentesque lacinia Morbi pede sem Suspendisse diam. Id tincidunt Proin sed interdum aliquam tempus urna tellus orci libero. Justo metus diam sed eros adipiscing metus rutrum eros tristique elit. Natoque congue convallis habitant nec eget ullamcorper interdum justo nulla Pellentesque. Semper faucibus quis orci adipiscing sed vestibulum elit pellentesque at Curabitur. Pellentesque nibh Curabitur tortor risus.</p>
    <p class="collapse">Morbi cursus ut leo parturient auctor eu fames dignissim neque mauris. Sollicitudin nibh lorem Donec condimentum vel malesuada risus eros justo sed. Vivamus Phasellus tempus interdum semper quis Morbi ornare justo elit urna. Lorem suscipit consequat hac consequat Nam amet pellentesque nec elit tellus. Cras et congue urna tempus sed metus risus et id nec. Curabitur euismod mollis Curabitur risus quis neque eget lacinia Curabitur condimentum. Proin Aenean.</p>
</div>

</body>
</html>
6

hey, thanks for the ideas, guys… it’s based on what is on www.whatisdamon.com, but i am in the process of making things look a little better in general with different types of content and incorporating a blog design into the rest of it. Right now its in a transitional phase as I toy around with some options. (right now most of the lines have been taken out bc i put in an entry class with a border but haven’t added it to many pages yet) i am definitely feeling like my code is often a little bit not as elegant as it should be, but that’s what learning is for…

i’m kind of worried that my number of divs is getting out of hand