You are here: Home / Computer / Internet / Web Site / CSS Tricks / Three Div.

Three Div tags in one

This is a trick that shows you how to insert three div tags inside one main div.

Problem

Let's take a navigation bar that has three links all within one frame, such as follows:

  • Previous (positioned on the left)
  • Top of page (positioned in the middle)
  • Next page (positioned on the right)

So if you want to proceed from left to right, then you would start your code with Previous page, then Top of page and finally Next page.

Example

Html code

<div id="PreviousPage">
<div class="PosLeft"><a href="..."><img src="..." alt="" /></a></div>
<div class="PosCenter"><a href="..."><img src="..." alt="" /></a></div>
<div class="PosRight"><a href="..."><img src="..." alt="" /></a></div> </div>

And in CSS

#ReturnPage {
margin: 0px;
padding: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #666666;
border-bottom-color: #666666;
text-decoration: none;
}
.PosCenter {
text-align: center;
}
.PosLeft {
text-align: left;
float: left;
}
.PosRight {
text-align: right;
float: right;
}

 

You will notice that there is a problem with Next Page, it is not in the right spot.

Solution

Very easy. You just have to place Next page between Previous and Top of page in the html code.

Example:

<div id="PreviousPage">
<div class="PosLeft"><a href="..."><img src="..." alt="" /></a></div>
<div class="PosRight"><a href=""..."><img src="..." alt="" /></a></div> <div class="PosCenter"><a href=""..."><img src="..." alt="" /></a></div>
</div>