How to design <p> elements inside a bordered container?

I am currently working on a webpage that features text enclosed in bordered boxes with styled formatting.

The primary issue I am encountering is that when I try to add another paragraph within the styled <p> tag containing the border styling, the subsequent text after the </p> ends up outside of the box. No matter where I place the additional <p>, it does not produce the desired outcome. Unfortunately, I have been unable to locate any tutorials demonstrating how to include extra paragraphs within a paragraph styled with a border. A snippet of the code is provided below... while this particular box was simple due to having only a brief single paragraph, the remainder of the page contains multiple paragraphs needing to remain enclosed within the border box.

Could someone please offer assistance?

<p style="border: solid 3px #4D545E; padding: 6px;">
  <strong style="color: #c01d21;">Book your Christmas party</strong>
  on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.
  <br>
  <a style="text-transform: uppercase;line-height: 38px;text-align: center; " class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank">
  <strong>Click to book a table</strong>
  </a>
  Or call <strong>#### ### ####</strong>
</p>
csshtml

Answer №1

After reviewing your request, I have crafted a code snippet for you to examine. Feel free to take a look and determine if it aligns with your requirements. If not, please provide further details so that I can tailor it to meet your specific needs.

.wrapper{
  border: solid 3px #4D545E; padding: 6px;
}

.center{
  text-align:center;
}
<div class="wrapper">
  <p><strong style="color: #c01d21;">Book your Christmas party</strong> on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.</p>
<p class="center">
<a style="text-transform: uppercase;line-height: 38px;text-align: center; "class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank"><strong>Click to book a table</strong></a></p>
<P class="center">
Or call <strong>#### ### ####</strong></p>
  </div>

Answer №2

Expanding on Jerry's response above, incorporating multiple paragraphs should be a straightforward process by simply including <p> tags (assuming this fits your requirements).

From a coding perspective, it can be achieved (building off Jerry's solution)

.wrapper{
  border: solid 3px #4D545E; padding: 6px;
}

.center{
  text-align:center;
 }
strong {
  color: #c01d21;
}
a {
  text-transform: uppercase;
  line-height: 38px;
  text-algin: center;
}

I have transferred all your styling to CSS. The html would remain the same as before, with additional <p> or any other desired tag.

<div class="wrapper">
  <p><strong>Book your Christmas party</strong> on any Monday-Thursday in November – and   all your guests will receive a complimentary Sorbete al Cava cocktail.</p>
  <p class="center">
  <a class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank"><strong>Click to book a table</strong></a></p>
  <P class="center">Or call <strong>#### ### ####</strong></p>

  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>

  <p class="center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>

  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>

</div>

Trust this clarifies things for you.

Answer №4

Hey everyone, I'm feeling a bit overwhelmed at the moment and may not always be able to respond right away. Luckily, we have an intern here who can help with any HTML questions you may have. Thanks for all your input, I really appreciate it. Stay tuned for more questions from me in the future! :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to determine if a browser is operating in compatibility mode?

Is there a way to determine if the browser is in compatibility mode or not? I need to apply different CSS depending on the mode. ...

asp.nethtmlcssie-compatibility-mode

Some browsers are failing to display the navigation bar on my website

After working on my website, www.alexanderpopov.org, I encountered an issue with the navigation bar disappearing on some computers and browsers. I'm using css to style it, but the problem persists. Below is the HTML code for your reference. Any advice ...

htmlcss

What is a method to position an <img> on top of text without obscuring the text or resorting to CSS background or text-indent

To view the related code snippet, click on this link: http://jsfiddle.net/Ws8ux/ Is there a way to position the text under the logo without hiding it through display:none or text-indent? I am aiming to bring the image up while keeping the logo in the back ...

htmlcss

Generating a fresh row while utilizing ng-repeat in AngularJS

I have implemented a basic ng-repeat function to create a list of countries along with their relevant data. Each entry in the list contains a hidden row that can be expanded or collapsed. I am facing an issue where I cannot get the hidden row to display c ...

htmlangularjsangularjs-directivehtml-tableangularjs-ng-repeat

adhesive section on the left side with a defined lower boundary

I have a contact div that I made sticky using Bootstrap affix. <div id="contactForm" data-spy="affix" data-offset-top="400"> However, I am unsure of how to limit its bottom to the top of the next div. In other words, I want it to stay in place when ...

javascriptjquerycsshtmlsticky

Steps to update the action attribute in a form element upon clicking a button

Within the following code snippet, there are 3 buttons - update, back, and delete. Depending on which button is clicked, the $page variable should be assigned to the action attribute in the form element, with the posted data being sent accordingly. <f ...

phphtml

Incorporating an additional row into a material table

Currently, I have implemented a mat-table with various features including drag and drop functionality and dynamic columns. However, I am facing an issue while trying to add row filters under the table header. I attempted to simply insert a <mat-row> ...

javascripthtmlangularangular-material

Capture Your Scene with Three.js

I am facing an issue where I need to capture a screenshot of a website. I have tried using html2canvas and it is working fine. However, the problem arises because I am using both THREE.WebGLRenderer and THREE.CSS3DRenderer (for HTML in webGL). The screen ...

javascriptthree.jsscreenshothtmlhtml2canvas

Foundation framework enables the creation of a full width footer that stands out

I'm having trouble getting my footer panel to stretch across the entire page, it seems stuck in the center. The header at the top of the page spans the full width just fine. Am I missing something? My goal is to make both panels at the bottom of the p ...

htmlcsszurb-foundation

What are the steps for implementing if-else statements in JavaScript when working with multiple dropdown lists?

I have encountered an issue while trying to display options in multiple drop-down lists. Only two words (CHENNAI AND IOS-XE, BANGALORE AND IOS-XR) are being displayed and the rest of the words are not appearing. Can someone provide assistance on fixing thi ...

javascripthtml

Modify background image upon hovering using AngularJS

I cannot seem to make the background images of my divs change. Despite trying various options, none of them have been successful. Here's an example of my code: <div ng-controller="mainController" class="main"> <div ng-repeat="land in lan ...

javascripthtmlangularjs

Using a variable to store the value of the id attribute in HTML code

How can I dynamically add an ID attribute to an HTML element using a variable declared in JavaScript? Using jQuery var table_row = $('table').find('tr#' + pid); var name = table_row.find('td:nth-child(1)').html(); table_ ...

javascripthtml

The functionality of a switch statement relies on the presence of a React-Router

Is there a way to dynamically change the text in a paragraph based on which Route is currently enabled? I tried using a switch statement, but I'm unsure of how to implement it. Any suggestions or ideas? import React from 'react'; import &ap ...

javascripthtmlreactjsreact-router

In Vue, it is not accurate to measure overflow

I am working on creating an overflow effect with tagging that fades out at the beginning to provide a subtle hint to users that there is more content. Here is what it currently looks like: https://i.stack.imgur.com/fXGBR.png To achieve this, I added a fa ...

javascripthtmlcssvue.js

Gather information from HTML elements that are updated with text dynamically via AJAX calls using Scrapy

My goal is to extract information about mobile phones listed on the 'amazon.in' website from the following link: here using scrapy. Below is the code I am using: from scrapy.spiders import CrawlSpider, Rule from scrapy.linkextractors import Lin ...

pythonhtmlajaxweb-scrapingscrapy

Step-by-step guide on achieving 100% height for a child element within a parent using Flexbox

Currently facing an issue where trying to make a child element take up 100% of the remaining height of its parent container causes the child's height to go beyond the boundaries of the parent. HTML .container { height: 340px; /* background-i ...

htmlcssflexbox

What is the method for retrieving embedded JavaScript content?

In an attempt to scrape a website using Cheerio, I am facing the challenge of accessing dynamic content that is not present in the HTML but within a JS object (even after trying options like window and document). Here's my code snippet: let axios = ...

javascripthtmlnode.jscheerio

Guide to showcasing an image on an HTML page using HTTP header

I have an HTML page with a basic layout that includes a single button. When this button is clicked, it needs to trigger an HTTP request to a specific URL while including an Accept header for GET requests. The response from the HTTP URL will vary depending ...

javascriptjqueryhtmlajax

How can I make a div move to the position of another div and stay with it when the screen is resized?

In my card game project, I am dealing with an issue where cards are not aligning properly with the designated "dropZonePositions" when the screen is resized. Despite creating animations for the card movement that I'm satisfied with, the problem arises ...

jqueryhtmlcssjquery-animatecss-grid

The CSS selector for radio input does not match when checked in IE7

I've been attempting to add a style to the label for a radio button with the CHECKED attribute, but so far all my attempts have failed to match on IE7. For example, I have created a JSFiddle here: JSFiddle. <!DOCTYPE html> <html> < ...

cssinternet-explorer-7