• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 864
  • Last Modified:

Vertical Line with DIV TAG

Hi Experts
  Like a horizontal Line  i need to add a vertical line to seperate my DIVs. please help me out.
 Thanks
0
B_Pati
Asked:
B_Pati
1 Solution
 
erikTsomikSystem Architect, CF programmer Commented:
0
 
pschramaCommented:
You can add a right border to your left div:

div#left
{
   border-right: solid 1px black;
}
0
 
remorinaCommented:
Hi B_Pati,
Try the code below it should show you how to achieve this
You can also set the minimum height so they would line up together

Cheers
<html>
<head>
<title>Vertical Separator</title>
<style type="text/css">
#wrapper {width:1000px;padding:10px;margin:0 auto;border:solid 1px #999;overflow:hidden;font:normal 12px Arial, Helvetica, Serif;}
.divextender {width:1100px;}
.divitem{
        float:left;
        width:220px;
        min-height:120px;
        border-right:solid 1px #ccc;
        margin:0 10px 10px 0;
        padding:10px;
}
.last {border:none;}
</style>
</head>
<body>
<div id="wrapper">
    <div class="divextender">
        <div class="divitem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue porttitor sem sit amet consequat.  </div>
        <div class="divitem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue porttitor sem sit amet consequat. Donec vel lectus leo. In non risus ac lorem lacinia euismod et ultrices sapien. Nam ultrices odio in dui convallis id aliquam diam sodales. </div>
        <div class="divitem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue porttitor sem sit amet consequat. Donec vel lectus leo. </div>
        <div class="divitem last">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue porttitor sem sit amet consequat. Donec vel lectus leo. In non risus ac lorem lacinia euismod et ultrices sapien. Nam ultrices </div>
    </div>
</div>

</body>
</html>

Open in new window

0
 
B_PatiAuthor Commented:
Solution helped me partially with little changes
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now