Css Course

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

Last accessed pages

  1. Multiple Select Dropdown List with AJAX (17251)
  2. PHP-MySQL Scripts (5632)
  3. Get and Modify content of an Iframe (23454)
  4. SHA1 Encrypt data in JavaScript (19325)
  5. PHP PDO - Select query, fetch (24492)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (494)
  2. Read Excel file data in PHP - PhpExcelReader (228)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (219)
  4. querySelector and querySelectorAll (209)
  5. Create simple Website with PHP (199)