[HTML & CSS] Text between borders

[Stefany93]

How to make border appear on the left and right sides of text? 

 

Let's say we have a div 200px x 100px with red border and ID of "container"

 

<style type="text/css">

   *{padding:0; margin:0;}

   #container{

      width:200px;

      height:100px;

      border:2px solid red;

   }

</style>

<div id="container">

   <p>Happy Potter</p>

   He was an awesome wizard!

</div>

 

Now we want to put the paragraph "Happy Potter" on the top of the div box between the red border. 

We do that by defining negative margin which will push up the paragraph like this:

 

#container p{

      margin-top:-15px;

   }

 

Now our paragraph is in between the border, almost how we want it to be. 

 

 

Next we want to push it in the middle. So we use margin-left:

 

#container p{

      margin-top:-15px;

                margin-left:50px;

   }

 

I'd suggest adjusting the left margin i.e. the pushing to the center thing with the developer tools of your browser ( right click on top of the element and Firebug ( for FF ) or Google Chrome Developer tools will pop up )

 

 

 

Next we want to remove the border that is overlapping the text. We do that by defining width of the text and giving it a background color that is the same as the div container and the outside area of it like this:

 

 

#container p{

      margin-top:-15px;

      margin-left: 50px;

      width: 83px;

      background: pink;

   }

 

In my case the background color of both the container div and the area outside of it was pink so I gave the same color to the paragraph after defining its width. We have the final result:

 

 

And now we and Harry Potter are happy

 

Final code:

 

<style type="text/css">

   *{padding:0; margin:0;}

   #container{

      width:200px;

      height:100px;

      border:2px solid red;

   }

   #container p{

      margin-top:-15px;

      margin-left: 50px;

      width: 100px;

      background: pink;

   }

</style>

<div id="container">

   <p>Happy Potter</p>

   He was an awesome wizard!

</div>

Edited March 5, 2014 by Stefany93

[Stefany93]

Sorry, it's a tutorial, I missed to put that in the title.