This tutorial shows you how to add /display a text between two DIV tags, like in this example:

Content added in DIV1
Row 2 ...
Content of DIV2
Row 2 ...

Text displayed in the middle, between DIV1 and DIV2



The trick is to include the two DIVs, and the text into another DIV. This DIV parent to have set: position:relative;, then, the two DIVs must have set float property, or display:inline-block;.
The text can be included in other HTML tag (H1, H2, SPAN, B, etc.).
- Here's two HTML and CSS codes that create this result (the CSS code must be added in <head> area, or into a '.css' file):

• Variant 1 (with float:left; and float:right;).

The code: <br style='clear:both;'> is used to annulate the effect of the 'float' property.

<style>
#divpt {
position:relative;
width:99%;
height:99%;
border:2px solid #010208;
padding:4px 5px;
text-align:center;
}

#div1 {
margin:1px 3px;
background-color:#b8c8fe;
float:left;
width:25%;
border:3px dotted blue;
}

#div2 {
margin:1px 3px;
background-color:#b8efc8;
float:right;
width:25%;
border:3px dotted green;
}

#divpt h3 {
margin:1px auto;
padding:1px 5px;
}
</style>

<h4>Example text between 2 Divs</h4>

<div id='divpt' class='cls'>
 <div id='div1'>Content added in DIV1<br/>Row 2 ...</div>
 <div id='div2'>Content of DIV2<br/>Row 2 ...</div>
 <h3>Text displayed in the middle, between DIV1 and DIV2</h3>
<br style='clear:both;'>
</div>
• Variant 2 (with a 'class', and display:inline-block; applied to that class):
<style>
#divpt {
position:relative;
width:99%;
height:99%;
border:2px solid black;
padding:4px 5px;
text-align:center;
}

#divpt .cls {
display:inline-block;
width:31%;
margin:2px auto;
border:2px dotted blue;
padding:1px 4px;
</style>

<h4>Example text between two Divs</h4>

<div id='divpt'>
 <div class='cls'>Content added in DIV1<br/>Row 2 ...</div>
 <h3 class='cls'>Text displayed in the middle, between DIV1 and DIV2</h3>
 <div class='cls'>Content of DIV2<br/>Row 2 ...</div>
</div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Add text between two DIV tags

Last accessed pages

  1. Common PHP Errors and Solutions (7372)
  2. JavaScript code and PHP (26553)
  3. Get and Modify content of an Iframe (19336)
  4. Multiple Select Dropdown List with JavaScript (9522)
  5. Working with getElementsByTagName (11245)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1321)
  2. Contact page - CoursesWeb (1292)
  3. Tabs effect with CSS (1289)
  4. PHP getElementById and getElementsByTagName (589)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (488)