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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Add text between two DIV tags

Last accessed pages

  1. PHP MySQL - SELECT, ORDER BY (8982)
  2. Frog Dares (157)
  3. Action Games (4889)
  4. Voting Poll System script PHP-AJAX (5308)
  5. Amazing Escape (241)

Popular pages this month

  1. Bubbles3 (3136)
  2. Butterfly Kyodai (2748)
  3. Zuma Deluxe (2025)
  4. Qwop (1252)
  5. Backgammon (1197)