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 defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Add text between two DIV tags

Last accessed pages

  1. PHP PDO - Select query, fetch (17029)
  2. Maze Runner Missions (383)
  3. Qwop (39690)
  4. The Mastery of Love (1688)
  5. Adventure Games (4770)

Popular pages this month

  1. Qwop (6865)
  2. Drag Racer V3 (4694)
  3. Bubbles3 (1916)
  4. List with All the Games (1605)
  5. Butterfly Kyodai (1507)