Add text between two DIV tags

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>

<<-Styling link buttons using .. -- Centering lines of Text, ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which type of <input> creates a date input control, such as a pop-up calendar?

type="text" type="date" type="button"

<input type="date" name="set_date" value="2012-10-15" />

Which CSS property adds shadow effects to the text of an element?

font-style color text-shadow

h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}

Click on the function that adds new elements to the end of an array.

pop() shift() push()

var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download

Which function sorts an array by key, in ascending order, maintaining key to data correlations?

asort() ksort() sort()

$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")

Add text between two DIV tags

Css Course

Text displayed in the middle, between DIV1 and DIV2

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month