I have what is probably a stupid problem, but I have been trying to figure it out for two days and can't. Please help.
I have am building a document that has about 100,000 words. Most of the content is plain old paragraphs, but some of it, p.sent and p.received, is formatted to look like text messages being sent back and forth. My problem is with the headers, h1 and h2, and how they interact with the text messages. Below is a sample of the html with a CSS style section. The first two headers are displaying the way they're supposed to, but the third header is broken up and interspersed among the text messages. Please tell me what I'm doing wrong in the style section of the document to fix it. Everything that I've tried with position, display, float has caused other layout problems.
body {
background-color: ivory;
margin: 0% 5% 0% 5%;
}
h1, h2 {
color: blue;
text-align: center;
position: relative;
}
p {
color: black;
text-indent: 2%;
line-height: 1.2;
position: relative;
display: inline;
float: left;
}
.sent {
border: 1px solid;
border-radius: 10px;
display: inline-block;
position: relative;
float: right;
text-align: right;
padding: 0.125% 0.5% 0.25% 0.5%;
margin: 0.0625% 20% 0.0625% 40%;
background-color: lightblue;
text-indent: 0;
line-height: 1;
}
.received {
border: 1px solid;
border-radius: 10px;
display: inline-block;
position: relative;
float: left;
text-align: left;
padding: 0.125% 0.5% 0.25% 0.5%;
margin: 0.0625% 40% 0.0625% 20%;
background-color: lightgrey;
text-indent: 0;
line-height: 1;
} <!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>---------- Part One ----------</h1>
<h2>subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et odio varius, congue elit quis, lobortis velit. Praesent ligula lorem, ullamcorper vitae mauris eu, placerat accumsan eros. Morbi in risus egestas, fringilla metus id, efficitur est. Fusce eu ipsum dapibus, iaculis nulla nec, sollicitudin leo. Pellentesque lorem tellus, suscipit nec leo eget, tristique vehicula odio. Proin congue purus auctor hendrerit mattis. Suspendisse ac enim orci. Cras nisl quam, molestie ut ligula vel, sodales imperdiet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam velit quam, elementum id orci convallis, maximus finibus diam. In auctor pellentesque eros, id venenatis nibh ornare et. Fusce urna eros, eleifend eget finibus eu, porta ut magna. Nullam vitae convallis ligula.</p>
<p>Maecenas lobortis urna eros, convallis feugiat velit tempus sit amet. Quisque euismod sed sapien et volutpat. Nam mollis risus at turpis fringilla, nec porttitor velit aliquet. Suspendisse consectetur dui vel tellus mollis, eget posuere justo consequat. Vivamus vulputate urna vitae magna gravida, interdum imperdiet tortor elementum. Curabitur finibus mauris ut lobortis elementum. Duis sollicitudin, augue id accumsan scelerisque, arcu risus tristique tellus, ut varius ligula nunc eu velit. Suspendisse sed convallis dui, eget vestibulum urna. Proin id quam vel velit eleifend semper sit amet eu felis.</p>
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla neque turpis, tincidunt et pellentesque sed, tempor quis odio. Nunc pulvinar dui nibh, sit amet placerat erat dictum vitae. Aliquam erat volutpat. Sed ut posuere tellus, quis varius tellus. Suspendisse augue orci, tristique ac eros quis, suscipit hendrerit tellus. Curabitur ac risus ac tortor malesuada pretium nec sit amet velit. Integer cursus sapien nibh, at molestie nunc vehicula sit amet. Maecenas tincidunt, mi ac congue porta, lacus quam porta ante, vel mattis mauris risus in ex. Quisque id iaculis libero. Donec at purus velit. Aliquam pretium arcu nec nunc faucibus dignissim. Nam pulvinar feugiat urna in vehicula. Curabitur vel lectus facilisis, dictum dui a, lobortis urna.</p>
<h1>---------- Part Two ----------</h1>
<h2>subtitle 2</h2>
<p>Pellentesque ultrices nulla ac aliquam lobortis. Nulla laoreet condimentum erat vitae pharetra. Pellentesque cursus ante dignissim lorem rhoncus dignissim. Ut hendrerit turpis a placerat bibendum. Sed consequat non ante a congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eleifend sem lectus, eu bibendum arcu pretium sed.</p>
<p>Nunc vitae ex malesuada, dapibus libero quis, tempor arcu. Mauris non sodales purus. Nunc iaculis ante et enim suscipit, ut pellentesque massa feugiat. Pellentesque dignissim turpis id sollicitudin bibendum. Aenean iaculis pretium tincidunt. Suspendisse potenti. Ut sed metus aliquet ex rhoncus ultricies. Aliquam eget lobortis elit. Nullam sed eros a orci blandit lacinia. Nunc rhoncus elit imperdiet luctus dignissim. Nam at finibus lorem, ut ornare mauris.</p>
<p class="sent">Hey there.</p>
<p class="received">Hey yourself. Whats up?</p>
<p class="sent">Not much. Just hanging out.</p>
<p class="sent">Do you have plans friday night?</p>
<p class="received">ikr</p>
<p class="received">This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response.</p>
<p class="sent">Wow that is a long message</p>
<p class="received">ikr</p>
<p class="sent">can you say that in fewer words</p>
<p class="received">Is this better?</p>
<p class="received">Or What about this?</p>
<h1>---------- Part Three ----------</h1>
<h2>subtitle 3</h2>
<p class="received">Or I can do it this way</p>
<p class="received">Stop me</p>
<p class="sent">Yes yes thats very good</p>
<p class="sent">This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response.</p>
<p class="received">:)</p>
<p class="sent">[thumbs up emoticon]</p>
<p class="received">yadda yadda yadda</p>
</body>
