CODEWITHSUNDEEP
htmlcss
nocalis
nocalis

Reputation: 176

Vertical line with text around

I need to do something like this:

enter image description here

A vertical line with text on the left and on the right.

I looked How to make a vertical line in HTML

I though about making a vertical line and then use border-left and border-right

But I don't see how to do it in pratic.

Upvotes: 0

Views: 124

Answers (1)

tejas
tejas

Reputation: 149

I made a very basic example, you might have to modify the #content rule for the size you need:

HTML

<div id="content">
    <div id="text">
        <div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div class="txt-r">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.         </div>
    </div>
    <div id="vline"></div>
</div>

CSS

body{
  margin: 0;
}
.txt{
  margin-left: 5%;
}
.txt-r{
  margin-left: 55%;
}
.txt-r, .txt {
   width: 40%;
   margin-top: 1%;
   border-style: solid;
}
#text{
  position: absolute;
}
#vline{
  position: absolute;
  border-left: thick solid #000000;
  margin-left: 50%;
  height: 100%;
}
#content{
  position: absolute;
  width: 100%;
  height: 100%;
}

JSFIDDLE

Upvotes: 1

Related Questions