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.
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;):
<style type="text/css">
#divpt {
position:relative;
width:99%;
height:100%;
border:2px solid #010208;
padding:2px 3px;
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>

<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>

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

• Variant 2 (with a "class", and float:left; applied to that class):
<style type="text/css">
#divpt {
position:relative;
width:99%;
height:100%;
border:2px solid black;
padding:2px 3px;
text-align:center;
}

#divpt .cls {
float:left;
width:32%;
margin:2px auto;
border:2px dotted blue;
padding:1px 4px;
}</style>

<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>
<br style="clear:both;" />
</div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Add text between two DIV tags

Last accessed pages

  1. Number Lines (1667)
  2. Bubbles3 (8868)
  3. Zuma Games (8603)
  4. Logic Perspicacity Games (2788)
  5. Match Around The World (171)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47785)
  2. Read Excel file data in PHP - PhpExcelReader (35922)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35547)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (32047)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29322)