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. CSS3 - new Background properties (874)
  2. Qwop (8196)
  3. Countdown Timer with starting time added into a form (4624)
  4. PHP PDO - Select query, fetch (14204)
  5. Easy Joe 3 (65)

Top accessed pages

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