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 attribute specifies the HTTP method (GET, POST) used to submit the form-data?
action method value
<form action="script.php" method="post"> ... </form>
Which CSS property allows to add shadow to boxes?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Which function removes the first element from an array?
pop() push() shift()
var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicate the function that can be used to check if a PHP extension is instaled.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO is available."
Add text between two DIV tags

Last accessed pages

  1. jqPlot Charts (5349)
  2. createElement and insertBefore (6308)
  3. Contact page - CoursesWeb (46067)
  4. Tabs effect with CSS (46653)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (54101)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (494)
  2. Contact page - CoursesWeb (479)
  3. Tabs effect with CSS (479)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (172)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (100)