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 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

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