#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;
}
<!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>
<!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>
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
From novice to tech pro — start learning today.
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.