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 adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Add text between two DIV tags

Last accessed pages

  1. Qwop (14583)
  2. Naruto Dating Sim (839)
  3. elmPosiz - Get position, size and visibility in viewport of HTML element (50)
  4. Zuma Deluxe (23636)
  5. Sketch (206)

Top accessed pages

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