CSS
CSS
HTML
HTML

How to create border around a header AND the following paragraph using css

I want to have a border around each header and the text that follows. I already know how to put border around the <h1> and <p> containers. Want to be able to border both together. My current code is as follows:

#column1 p
{
  text-align: justify;
  background-color:#5e6e41;
  padding: 2em;
  border-style: solid;
  border-radius:20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 40px;
  border-width:0.2em;
  -moz-border-width:0.2em;
  -webkit-border-width:0.4em;
  border-color:white;
   -webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
column-break-inside:avoid;

}

#column1 h1
{
 border-color:black;
 }

Open in new window

LVL 16

SheilsAsked: 2012-04-03

Who is Participating?

LVL 12

Tony van SchaikFront-end Web developerCommented: 2012-04-03

You will still need a div or an other HTML element to add a border around the H1 and P element.

Maybe you can add a new div with jQuery like this .wrap function: http://api.jquery.com/wrap/.

jQuery saves me a lots of time when i don't have to possibility to edit the HTML output of a CMS, you can manipulate almost everything with it.

LVL 16

SheilsAuthor Commented: 2012-04-03

I also note that I am aware that this layout may be achieved by putting a border on the div. However, I am designing the page for a cms. So it will not be possible to manually insert each heading and subsequent paragraphs in separate divs

LVL 30

LZ1Commented: 2012-04-03

This is very basic, but it could just work. The secret is to not use margin-bottom or padding-bottom and it should line up.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
			h1{font-size:25px;margin:0;border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;}
			p{font-size:12px;margin:0;border-bottom:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;}
		
		</style>
  </head>
  
  <body>
    <h1>This is my heading</h1>
    <p>
      This is my paragraph.
      This is my paragraph.
      This is my paragraph.
      This is my paragraph.
      This is my paragraph.
      This is my paragraph.
      This is my paragraph.
    </p>
  </body>
</html>

Open in new window

LVL 16

SheilsAuthor Commented: 2012-04-03

therealteune,

The jQuery approach looks promising. I had a look at their website but I could not figure out how to make it return an outcome like to code below.

Basically I want to start the div at the <h1> and include every following <p> until I reach the next <h1>.

<!DOCTYPE html>
<html>
<head>
  <style>

  .hpdiv {border: 2px solid blue; margin-top:10px; padding:2px;}
  h1{margin: 0;padding:0}

  </style>

</head>
<body>
  <div class="hpdiv">
    <h1>First Heading</h1>
    <p>Para 1.1</p>
    <p>para 1.2</p>
  </div>

  <div class="hpdiv">
    <h1>Second Heading</h1>
    <p>Para 2.1</p>
    <p>para 2.2</p>
  </div>

</body>
</html>