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 HTML5 tag is indicated to be used as container for menu with navigation links in Web site?

<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>

Which CSS property shifts an item horizontally to the left or right of where it was?

text-align clear float

.some_class {
  width: 30%;
  float: left;
}

Click on the Math object method which returns x, rounded downwards to the nearest integer.

Math.ceil(x) Math.abs(x) Math.floor(x)

var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12

Indicate the PHP function which returns the number of characters in string.

mb_strlen() count() stristr()

$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30

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